原生js实现on与off 方法

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

实现方式

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

一个空壳子

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

var Event = {
    // 绑定
    on: function(event, querySelector, callback, useCapture){
    	return ((event, querySelector, callback, useCapture));
    }，
    // 解除绑定
    off: function(event, querySelector) {
    	return ((event, querySelector));
    },
    // 获取 jTool Event 对象
    getEventObject: function (event, querySelector, callback, useCapture){
    	// 事件代理实现核心
    	// 注意: 这个方法为包装函数,此处的this为触发事件的Element
    	var fn = callback;
    		callback = function(e){
    			// 验证子选择器所匹配的nodeList中是否包含当前事件源 或 事件源的父级
    			// 注意: 这个方法为包装函数,此处的this为触发事件的Element
    			var target = ;
    			while(target !== this ){
    				if([].( (querySelector), target) !== -1){
    					(target, arguments);
    					break;
    				}
    				target = ;
    			}
    		};
    
    	return {
    			eventName: event + querySelector,
    			type: event,
    			querySelector: querySelector,
    			callback: callback || ,
    			useCapture: useCapture || false
    		};
    },
    // 增加事件,并将事件对象存储至DOM节点
    addEvent: function (eventList){
    }，
    // 删除事件,并将事件对象移除出DOM节点
    removeEvent: function (eventList){
    
    }
}

参数说明

event: 事件名, 如 ‘click’，并支持 ‘click.scope1’ 事件域的方法(虽然支持，但由于暂时没有使用场景。所以仅对参数进行了处理，功能上没有实现)
querySelector: 子选择器
callback: 事件触发后执行的函数
useCapture: 指定事件是否在捕获或冒泡阶段执行.true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行
eventList: 由 .getEventObject() 方法生成的 Event 对象，

on的实现逻辑

通过调用jTool实例的on方法，传入参数
调用getEventObject() 获取事件对象
调用addEvent() 方法进行事件绑定

off的实现逻辑

通过调用jTool实例的off方法，传入参数

调用getEventObject()获取事件对象

调用removeEvent()方法解除事件绑定

完整Event对象

var _Event = {
    on: function(event, querySelector, callback, useCapture) {
    	// 将事件触发执行的函数存储于DOM上, 在清除事件时使用
    },
    
    off: function(event, querySelector) {
    	return ((event, querySelector));
    },
    
    bind: function(event, callback, useCapture) {
    	return (event, undefined, callback, useCapture);
    },
    
    unbind: function(event) {
    	return ((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) {
    		('事件绑定失败,原因: 参数中缺失事件类型');
    		return this;
    	}
    
    	// 子选择器不存在 或 当前DOM对象包含Window Document 则将子选择器置空
    	if(!querySelector || ([0]) !== 'element'){
    		querySelector = '';
    	}
    	// #Event003 存在子选择器 -> 包装回调函数, 回调函数的参数
    	// 预绑定功能实现
    	if(querySelector !== ''){
    		var fn = callback;
    		callback = function(e){
    			// 验证子选择器所匹配的nodeList中是否包含当前事件源 或 事件源的父级
    			// 注意: 这个方法为包装函数,此处的this为触发事件的Element
    			var target = ;
    			while(target !== this ){
    				if([].( (querySelector), target) !== -1){
    					(target, arguments);
    					break;
    				}
    				target = ;
    			}
    		};
    	}
    	var eventSplit = (' ');
    	var eventList = [],
    		eventScopeSplit,
    		eventObj;
    
    	(eventSplit, function(i, eventName) {
    		if (() === '') {
    			return true;
    		}
    
    		eventScopeSplit = ('.');
    		eventObj = {
    			eventName: eventName + querySelector,
    			type: eventScopeSplit[0],
    			querySelector: querySelector,
    			callback: callback || ,
    			useCapture: useCapture || false,
    			// TODO: nameScope暂时不用
    			nameScope: eventScopeSplit[1] || undefined
    		};
    		(eventObj);
    	});
    	return eventList;
    },
    
    // 增加事件,并将事件对象存储至DOM节点
    addEvent: function(eventList) {
    	var _this = this;
    	(eventList, function (index, eventObj) {
    		(_this.DOMList, function(i, v){
    			 =  || {};
    			[] = [] || [];
    			[].push(eventObj);
    			(, , );
    		});
    	});
    	return _this;
    },
    
    // 删除事件,并将事件对象移除出DOM节点
    removeEvent: function(eventList) {
    	var _this = this;
    	var eventFnList; //事件执行函数队列
    	(eventList, function(index, eventObj) {
    		(_this.DOMList, function(i, v){
    			if (!) {
    				return;
    			}
    			eventFnList = [];
    			if (eventFnList) {
    				(eventFnList, function(i2, v2) {
    					(, );
    				});
    				[] = undefined;
    			}
    		});
    	});
    	return _this;
    }
};

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

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

另推荐个表格组件gridManager

秒客网