运用过
jQuery的同砚，应当对事宜绑定要领
.on()
.off()有肯定的相识。 在个人类库
jTool 中完成了这两个要领，这里就来细说下原生完成体式格局。
完成体式格局
代码中运用到一个基本要领对象
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
