Mr.J的jQuery学习笔记：第三十一讲——深入解析事件操作（on/off）方法

on(type, callback)

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起&＃xff0c;on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利&＃xff0c;我们推荐使用该方法&＃xff0c;它简化了 jQuery 代码库。

注意&＃xff1a;使用 on() 方法添加的事件处理程序适用于当前及未来的元素&＃xff08;比如由脚本创建的新元素&＃xff09;。

提示&＃xff1a;如需移除事件处理程序&＃xff0c;请使用 off() 方法。

提示&＃xff1a;如需添加只运行一次的事件然后移除&＃xff0c;请使用 one() 方法。

语法

$(selector).on(event,childSelector,data,function)

之前有写过 on() 的相关内容&＃xff1a;

页面:


我是按钮1
我是按钮2


调用方法

$("button").on("click", function () {alert("click1");
});$("button").on("click", function () {alert("click2");
});$("button").on("mouseenter", function () {alert("mouseenter");
});$("button").on("mouseleave", function () {alert("mouseleave");
});


当调用以上方法时&＃xff0c;会进行相关事件的触发。由于on的特点&＃xff1a;

1.注册多个相同类型事件, 后注册的不会覆盖先注册的
2.注册多个不同类型事件, 后注册的不会覆盖先注册的

最终的结果会是&＃xff08;根据触发先后顺序&＃xff09;&＃xff1a; mouseenter -> click1 -> click2 -> mouseleave

编写函数方法进行调用&＃xff1a;

var btn &＃61; document.querySelector("button");btn.addEventListener("click", function (ev) {alert("click1");
});
//IE8及以下版本&＃xff1a;btn.attachEvent("onclick", function () {alert("click1");});


封装函数

var btn &＃61; document.querySelector("button");function addEvent(dom, name, callBack) {if(dom.addEventListener){dom.addEventListener(name, callBack);}else{dom.attachEvent("on"&＃43;name, callBack);}
}
addEvent(btn, "click", function () {alert("click1");
})

同样&＃xff0c;运行结果也是上面的。

$("button").on("click", function () {alert("click1");});$("button").on("click", function () {alert("click2");});


当自己想要进行jQuery源码编辑时。这个button事件的触发可能会有所不同。以上面的例子输出结果应该是click1 -> click2

但是当在低级浏览器时&＃xff0c;结果却是&＃xff1a;click2 - > click1

这时&＃xff0c;可以进行方法的编写进行统一&＃xff1a;

1. 在btn事件创建一个数组&＃xff1a;btn.eventsCache &＃61; {}
2. 通过push()方法进行相关事件的传递
3. 通过循环&＃xff0c;进行事件方法的输出
4. 统一高级和低级浏览器的方法

源码如下&＃xff1a;

function addEvent(dom, name, callBack) {//相关事件调用如下// btn, "click", test1// btn, "click", test2// btn, "mouseenter", test3// btn, "mouseleave", test4if(!dom.eventsCache){dom.eventsCache &＃61; {}; //btn.eventsCache &＃61; {} 创建空的对象}if(!dom.eventsCache[name]){//如果没有指定的类型&＃xff0c;就进行数组的添加/* //属性方法&＃xff0c;数组内容的添加btn.eventsCache &＃61; {click: [test1, test2],mouseenter: [test3],mouseleave: [test4]}*/dom.eventsCache[name] &＃61; [];dom.eventsCache[name].push(callBack);if(dom.addEventListener){//根据顺序进行推入// 1. click 3.mouseenter 4.mouseleavedom.addEventListener(name, function () {for(var i &＃61; 0; i }
//编写函数
function test1(){alert("click1");
}
function test2(){alert("click2");
}
function test3(){alert("mouseenter");
}
function test4(){alert("mouseleave");
}
// btn.eventsCache &＃61; [test1, test2];
//进行调用
addEvent(btn, "click", test1);
addEvent(btn, "click", test2);
addEvent(btn, "mouseenter", test3);
addEvent(btn, "mouseleave", test4);


相关解释在注释内&＃xff0c;最终的结果会是&＃xff08;根据触发先后顺序&＃xff09;&＃xff1a; mouseenter -> click1 -> click2 -> mouseleave

源码封装

on: function (name, callBack) {// 1.遍历取出所有元素this.each(function (key, ele) {// 2.判断当前元素中是否有保存所有事件的对象if(!ele.eventsCache){ele.eventsCache &＃61; {};}// 3.判断对象中有没有对应类型的数组if(!ele.eventsCache[name]){ele.eventsCache[name] &＃61; [];// 4.将回调函数添加到数据中ele.eventsCache[name].push(callBack);// 5.添加对应类型的事件njQuery.addEvent(ele, name, function () {njQuery.each(ele.eventsCache[name], function (k, method) {method.call(ele);});});}else{// 6.将回调函数添加到数据中ele.eventsCache[name].push(callBack);}});return this;
},


off(type, callback)

定义和用法

off() 方法通常用于移除通过 on()方法添加的事件处理程序。

自 jQuery 版本 1.7 起&＃xff0c;off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利&＃xff0c;我们推荐使用该方法&＃xff0c;它简化了 jQuery 代码库。

注意&＃xff1a;如需移除指定的事件处理程序&＃xff0c;当事件处理程序被添加时&＃xff0c;选择器字符串必须匹配 on() 方法传递的参数。

提示&＃xff1a;如需添加只运行一次的事件然后移除&＃xff0c;请使用 one()方法。

语法

$(selector).off(event,selector,function(eventObj),map)

function test1() {alert("click1");
}
function test2() {alert("click2");
}
function test3() {alert("mouseenter");
}
$("button").on("click", test1);
$("button").on("click", test2);
$("button").on("mouseenter", test3);


进行off方法的调用&＃xff1a;

 1.不传参, 会移除所有事件

$("button").off();

2.传递一个参数, 会移除对应类型所有事件

$("button").off("click");

最终输出:  mouseenter

3.传递两个参数, 会移除对应类型对应事件

$("button").off("click", test1);

最终输出的结果 &＃xff1a; mouseenter -> click2

源码封装

off: function (name, callBack) {// 1.判断是否没有传入参数if(arguments.length &＃61;&＃61;&＃61; 0){this.each(function (key, ele) {ele.eventsCache &＃61; {};});}// 2.判断是否传入了一个参数else if(arguments.length &＃61;&＃61;&＃61; 1){this.each(function (key, ele) {ele.eventsCache[name] &＃61; [];});}// 3.判断是否传入了两个参数else if(arguments.length &＃61;&＃61;&＃61; 2){this.each(function (key, ele) {njQuery.each(ele.eventsCache[name], function (index, method) {// 判断当前遍历到的方法和传入的方法是否相同if(method &＃61;&＃61;&＃61; callBack){ele.eventsCache[name].splice(index, 1);}});});}return this;
}