jQuery源码探索之路（6）-- 事件绑定的不同

自己最近在学习一些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

如果您不知道我在说什么的话，推荐您从头开始看我的这个系列文章:

jQuery源码探索之路（6）-- 事件绑定的不同