on(type, callback)
定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:如需移除事件处理程序,请使用 off() 方法。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
语法
$(selector).on(event,childSelector,data,function)
参数 | 描述 |
---|---|
event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值,也可以是数组。必须是有效的事件。 |
childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 |
data | 可选。规定传递到函数的额外数据。 |
function | 可选。规定当事件发生时运行的函数。 |
之前有写过 on() 的相关内容:
页面:
<body>
<button>我是按钮1</button>
<button>我是按钮2</button>
</body>
调用方法
$("button").on("click", function () {
alert("click1");
});
$("button").on("click", function () {
alert("click2");
});
$("button").on("mouseenter", function () {
alert("mouseenter");
});
$("button").on("mouseleave", function () {
alert("mouseleave");
});
当调用以上方法时,会进行相关事件的触发。由于on的特点:
1.注册多个相同类型事件, 后注册的不会覆盖先注册的
2.注册多个不同类型事件, 后注册的不会覆盖先注册的
最终的结果会是(根据触发先后顺序): mouseenter -> click1 -> click2 -> mouseleave
编写函数方法进行调用:
var btn = document.querySelector("button");
btn.addEventListener("click", function (ev) {
alert("click1");
});
//IE8及以下版本:
btn.attachEvent("onclick", function () {
alert("click1");
});
封装函数
var btn = document.querySelector("button");
function addEvent(dom, name, callBack) {
if(dom.addEventListener){
dom.addEventListener(name, callBack);
}else{
dom.attachEvent("on"+name, callBack);
}
}
addEvent(btn, "click", function () {
alert("click1");
})
同样,运行结果也是上面的。
$("button").on("click", function () {
alert("click1");
});
$("button").on("click", function () {
alert("click2");
});
当自己想要进行jQuery源码编辑时。这个button事件的触发可能会有所不同。以上面的例子输出结果应该是click1 -> click2
但是当在低级浏览器时,结果却是:click2 - > click1
这时,可以进行方法的编写进行统一:
- 在btn事件创建一个数组:btn.eventsCache = {}
- 通过push()方法进行相关事件的传递
- 通过循环,进行事件方法的输出
- 统一高级和低级浏览器的方法
源码如下:
function addEvent(dom, name, callBack) {
//相关事件调用如下
// btn, "click", test1
// btn, "click", test2
// btn, "mouseenter", test3
// btn, "mouseleave", test4
if(!dom.eventsCache){
dom.eventsCache = {}; //btn.eventsCache = {} 创建空的对象
}
if(!dom.eventsCache[name]){
//如果没有指定的类型,就进行数组的添加
/*
//属性方法,数组内容的添加
btn.eventsCache = {
click: [test1, test2],
mouseenter: [test3],
mouseleave: [test4]
}
*/
dom.eventsCache[name] = [];
dom.eventsCache[name].push(callBack);
if(dom.addEventListener){
//根据顺序进行推入
// 1. click 3.mouseenter 4.mouseleave
dom.addEventListener(name, function () {
for(var i = 0; i < dom.eventsCache[name].length; i++){
dom.eventsCache[name][i]();
}
});
}else{
dom.attachEvent("on"+name, function () {
//IE8及其以下浏览器
for(var i = 0; i < dom.eventsCache[name].length; i++){
dom.eventsCache[name][i]();
}
});
}
}else{
//存在相同属性名称的数组之后,直接进行push方法
dom.eventsCache[name].push(callBack);
}
}
//编写函数
function test1(){
alert("click1");
}
function test2(){
alert("click2");
}
function test3(){
alert("mouseenter");
}
function test4(){
alert("mouseleave");
}
// btn.eventsCache = [test1, test2];
//进行调用
addEvent(btn, "click", test1);
addEvent(btn, "click", test2);
addEvent(btn, "mouseenter", test3);
addEvent(btn, "mouseleave", test4);
相关解释在注释内,最终的结果会是(根据触发先后顺序): mouseenter -> click1 -> click2 -> mouseleave
源码封装
on: function (name, callBack) {
// 1.遍历取出所有元素
this.each(function (key, ele) {
// 2.判断当前元素中是否有保存所有事件的对象
if(!ele.eventsCache){
ele.eventsCache = {};
}
// 3.判断对象中有没有对应类型的数组
if(!ele.eventsCache[name]){
ele.eventsCache[name] = [];
// 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 起,off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。
提示:如需添加只运行一次的事件然后移除,请使用 one()方法。
语法
$(selector).off(event,selector,function(eventObj),map)
参数 | 描述 |
---|---|
event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。 |
selector | 可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。 |
function(eventObj) | 可选。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
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方法的调用:
1.不传参, 会移除所有事件
$("button").off();
2.传递一个参数, 会移除对应类型所有事件
$("button").off("click");
最终输出: mouseenter
3.传递两个参数, 会移除对应类型对应事件
$("button").off("click", test1);
最终输出的结果 : mouseenter -> click2
源码封装
off: function (name, callBack) {
// 1.判断是否没有传入参数
if(arguments.length === 0){
this.each(function (key, ele) {
ele.eventsCache = {};
});
}
// 2.判断是否传入了一个参数
else if(arguments.length === 1){
this.each(function (key, ele) {
ele.eventsCache[name] = [];
});
}
// 3.判断是否传入了两个参数
else if(arguments.length === 2){
this.each(function (key, ele) {
njQuery.each(ele.eventsCache[name], function (index, method) {
// 判断当前遍历到的方法和传入的方法是否相同
if(method === callBack){
ele.eventsCache[name].splice(index, 1);
}
});
});
}
return this;
}