使用过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 在前端行业的慢慢弱化，总是会有一种斯人远去，何者慰籍的感觉。互勉吧，各位。
@拭目以待
个人站点：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
《野生前端工程师》专辑中所有文章均为@拭目以待原创，转载请注明出处。
网友评论