原生js实现on与off 方法

on,off,jtool

拭目以待 发布于

使用过jQuery的同学,应该对事件绑定方法 .on() .off() 有一定的了解。 在个人类库 jTool 中实现了这两个方法,这里就来细说下原生实现方式。

    注意: 

    以下为个人类库 jToolEvent 实现方式。

    代码中使用到一个基础方法对象 utilities , 该对象为 jTool 的基础类。 如果想了解更多,可以通过点击进入查看原码。


首先通过一个空架子来了解下实现逻辑,核心实现在getEventObject() 方法内的包装函数

var Event = {
    // 绑定
	on: function(event, querySelector, callback, useCapture){
		return this.addEvent(this.getEventObject(event, querySelector, callback, useCapture));
	},
	// 解除绑定
	off: function(event, querySelector) {
		return this.removeEvent(this.getEventObject(event, querySelector));
	},
	// 获取 jTool Event 对象
	getEventObject: function (event, querySelector, callback, useCapture){
		// 事件代理实现核心
		// 注意: 这个方法为包装函数,此处的this为触发事件的Element
		var fn = callback;
			callback = function(e){
				// 验证子选择器所匹配的nodeList中是否包含当前事件源 或 事件源的父级
				// 注意: 这个方法为包装函数,此处的this为触发事件的Element
				var target = e.target;
				while(target !== this ){
					if([].indexOf.call( this.querySelectorAll(querySelector), target) !== -1){
						fn.apply(target, arguments);
						break;
					}
					target = target.parentNode;
				}
			};

		return {
				eventName: event + querySelector,
				type: event,
				querySelector: querySelector,
				callback: callback || utilities.noop,
				useCapture: useCapture || false
			};
	},
	// 增加事件,并将事件对象存储至DOM节点
	addEvent: function (eventList){
	},
	// 删除事件,并将事件对象移除出DOM节点
	removeEvent: function (eventList){

	}
}

参数说明

  1. event: 事件名, 如 'click', 并支持 'click.scope1' 事件域的方法(虽然支持,但由于暂时没有使用场景。所以仅对参数进行了处理,功能上没有实现) 

  2. querySelector: 子选择器

  3. callback: 事件触发后执行的函数

  4. useCapture: 指定事件是否在捕获或冒泡阶段执行.true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行

  5. eventList: 由 .getEventObject() 方法生成的 Event 对象,


on的实现逻辑


off的实现逻辑


完整Event对象

var _Event = {
	on: function(event, querySelector, callback, useCapture) {
		// 将事件触发执行的函数存储于DOM上, 在清除事件时使用
	},

	off: function(event, querySelector) {
		return this.removeEvent(this.getEventObject(event, querySelector));
	},

	bind: function(event, callback, useCapture) {
		return this.on(event, undefined, callback, useCapture);
	},

	unbind: function(event) {
		return this.removeEvent(this.getEventObject(event));
	},
	// 获取 jTool Event 对象
	getEventObject: function(event, querySelector, callback, useCapture) {
		// $(dom).on(event, callback);
		if (typeof querySelector === 'function') {
			useCapture = callback || false;
			callback = querySelector;
			querySelector = undefined;
		}
		// event callback 为必要参数
		if (!event) {
			utilities.error('事件绑定失败,原因: 参数中缺失事件类型');
			return this;
		}

		// 子选择器不存在 或 当前DOM对象包含Window Document 则将子选择器置空
		if(!querySelector || utilities.type(this.DOMList[0]) !== 'element'){
			querySelector = '';
		}
		// #Event003 存在子选择器 -> 包装回调函数, 回调函数的参数
		// 预绑定功能实现
		if(querySelector !== ''){
			var fn = callback;
			callback = function(e){
				// 验证子选择器所匹配的nodeList中是否包含当前事件源 或 事件源的父级
				// 注意: 这个方法为包装函数,此处的this为触发事件的Element
				var target = e.target;
				while(target !== this ){
					if([].indexOf.call( this.querySelectorAll(querySelector), target) !== -1){
						fn.apply(target, arguments);
						break;
					}
					target = target.parentNode;
				}
			};
		}
		var eventSplit = event.split(' ');
		var eventList = [],
			eventScopeSplit,
			eventObj;

		utilities.each(eventSplit, function(i, eventName) {
			if (eventName.trim() === '') {
				return true;
			}

			eventScopeSplit = eventName.split('.');
			eventObj = {
				eventName: eventName + querySelector,
				type: eventScopeSplit[0],
				querySelector: querySelector,
				callback: callback || utilities.noop,
				useCapture: useCapture || false,
				// TODO: nameScope暂时不用
				nameScope: eventScopeSplit[1] || undefined
			};
			eventList.push(eventObj);
		});
		return eventList;
	},

	// 增加事件,并将事件对象存储至DOM节点
	addEvent: function(eventList) {
		var _this = this;
		utilities.each(eventList, function (index, eventObj) {
			utilities.each(_this.DOMList, function(i, v){
				v.jToolEvent = v.jToolEvent || {};
				v.jToolEvent[eventObj.eventName] = v.jToolEvent[eventObj.eventName] || [];
				v.jToolEvent[eventObj.eventName].push(eventObj);
				v.addEventListener(eventObj.type, eventObj.callback, eventObj.useCapture);
			});
		});
		return _this;
	},

	// 删除事件,并将事件对象移除出DOM节点
	removeEvent: function(eventList) {
		var _this = this;
		var eventFnList; //事件执行函数队列
		utilities.each(eventList, function(index, eventObj) {
			utilities.each(_this.DOMList, function(i, v){
				if (!v.jToolEvent) {
					return;
				}
				eventFnList = v.jToolEvent[eventObj.eventName];
				if (eventFnList) {
					utilities.each(eventFnList, function(i2, v2) {
						v.removeEventListener(v2.type, v2.callback);
					});
					v.jToolEvent[eventObj.eventName] = undefined;
				}
			});
		});
		return _this;
	}
};

.on() 与 .bind() 都可以进行事件绑定, 区别在于 .on() 使用事件代理。 事件代理是一种事件预绑定机制, 该机制可以在事件节点不存在的情况下, 将事件绑定至已存在父级节点之上的方式。


源码链接


随笔一行

这是前端最好的时代, 这也是前端最坏的时代。 众多前端框架满天飞,随着 jQuery 在前端行业的慢慢弱化,总是会有一种斯人远去,何者慰籍的感觉。互勉吧,各位。