- 自己最近在学习一些JS插件的写法，那么当然就绕不开jquery，于是自己就边学习边模仿，写一个自己的jQuery
- 自己也是在学习过程中，有问题请各位指出，希望大伙能多多支持，多点star
，源码github地址
jQuery源码探索之路
.addEventListener(type , fn , false)
这是除了IE都支持的绑定事件的API，这里不讲兼容问题，主要是要看JQ内部是如何绑定事件的，后续还会写JQ是如何实现事件代理的。
addEventListener具体解释可以上MDN或W3C看，这里直接看怎么使用。
首先，addEventListener是可以重复绑定的，而不会覆盖，比如
绑定两个
click后触发
但是在JQ中，如果是要绑定多个function到同一个DOM上，就不是重复调用addEventListener了，而是使用一个数组去将这些fn缓存，然后绑定一个主监听，在这个主监听fn中，将数组里的fn一个个的倒出来调用。
上个代码的例子你就明白了
var b2 = document.getElementById("box2");
var events = [];
for(var i = 0; i < 300; i++){
events.push(function(){
console.log("数组缓存fn");
})
}
b2.addEventListener('click',function(e){
var target = e.target;
for(var i = 0; i < events.length; i++){
events[i].call(target,e);
}
})
当在DOM上触发事件后，会去执行绑定的方法，在这个主监听fn中有个for循环，将events数组中缓存的fn一个个的调用。
使用call方法改变具体fn里的this指向的上下文。
将e作为参数传递给每个fn。
明白了这个，JQ的事件模块就能看懂了。
两种方法的比较
我一直认为后面这种方法只是是代码看起来简单优雅，没有那么多的重复内容，不明白性能上会不会有什么差异。
为了探索性能的差异，我写了一段代码粗糙的测试一下
//执行绑定的开始时间戳和结束时间戳
var start,end;
//触发事件，执行的开始时间戳和结束时间戳
var addStart,addEnd;
var b1 = document.getElementById('box1');
var b2 = document.getElementById("box2");
addStart = new Date().getTime();
b1.addEventListener('click',function(e){
start = new Date();
console.log("开始执行");
},false)
for(var i = 0; i < 3000; i++){
b1.addEventListener('click',function(e){
console.log("重复addEventListener绑定");
});
}
b1.addEventListener('click',function(e){
console.log("结束执行")
end = new Date();
console.log("第一种方法执行时间",end.getTime() - start.getTime());
})
addEnd = new Date().getTime();
console.log('使用重复addEventListener绑定消耗事件：',addEnd - addStart);
addStart = new Date().getTime();
var events = [];
for(var i = 0; i < 3000; i++){
events.push(function(){
console.log("使用数组缓存fn");
})
}
b2.addEventListener('click',function(e){
var target = e.target;
start = new Date();
for(var i = 0; i < events.length; i++){
events[i].call(target,e);
}
end = new Date();
console.log("使用数组执行时间",end.getTime() - start.getTime());
})
addEnd = new Date().getTime();
console.log("使用数组缓存消耗时间：",addEnd - addStart);
代码里都有注释，应该看得懂，直接上测试结果
测试结果
可以看到在执行绑定的时候，重复的使用addEventListener消耗的事件比使用数组
push要慢得多。而在触发click事件执行函数的时候，两者的时间相差不大。
我找不到浏览器内部处理addEventListener API相关的解释，猜测它应该也是已数组的形式储存同一个DOM的同一类型事件，所以两者的时间才会差不多。
希望有知道具体解释的朋友告诉我。
明白了两者的不同，后面简易的写JQ的事件绑定方式就简单啦，敬请期待吧！
附：
既然您看都看完了，麻烦您点个赞，给个star呗，谢谢您的支持！！！
源码地址：https://github.com/LY550275752/my-js-plug/blob/master/Ye.js
如果您不知道我在说什么的话，推荐您从头开始看我的这个系列文章:
网友评论