关于DOM的事件传送机制

文章正文还需 3 分钟

addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值，最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序

html 复制代码

<ul id="ul">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

js 复制代码

 var ul = document.querySelector('#ul');
 ul.addEventListener('click' ,function () {
     alert('ul')
 },false);

 var li = document.querySelector('#ul > li');
 li.addEventListener('click' ,function () {
     alert('li')
 },true)

上面的例子中，把 li 事件监听的执行过程是捕获，而捕获先于冒泡执行，所以是先alert（‘’li“）再
alert（‘’ul“）, 但是如果我们这样改一下：

js 复制代码

var ul = document.querySelector('#ul');
ul.addEventListener('click' ,function () {
     alert('ul')
 },true);

var li = document.querySelector('#ul > li');
li.addEventListener('click' ,function () {
    alert('li')
},true)

那么结果就是先alert（‘’ul“）再alert（‘’li“）了，

通过冒泡或者捕获可以做事件事件委托

html 复制代码

$('#ul').on('click' , 'li' , function(){

    $(this).css('background' , 'blue');
})

addEventListener 第三个参数

true:表明事件是在捕获阶段执行函数
false:表明事件是在冒泡阶段执行函数默认值

是否一定要与removeEventlister成对儿出现？

比如在单页应用中，切换了页面后，原组件已经卸载，但其注册在document上的事件却保留了下来，白白占用了内存空间。所以removeEventlister与addEventListener成对儿出现是best practice，可以避免可能出现的内存泄漏问题