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