[jQuery原理] jQuery事件操作相关方法

事件操作相关方法

on(type, callback)

注册事件

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

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)

移出事件

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

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; }