使用过jQuery的同学，应该对事件绑定方法.on().off()有一定的了解。 在个人类库jTool 中实现了这两个方法，这里就来细说下原生实现方式。
实现方式
以下为个人类库jTool 中 Event 实现方式。
代码中使用到一个基础方法对象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){ }}参数说明
- 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 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 在前端行业的慢慢弱化，总是会有一种斯人远去，何者慰籍的感觉。互勉吧，各位。
另推荐个表格组件gridManager