JavaScript冒泡捕获事件流详解

JavaScript事件由来已久，他们是js和html之间交互的桥梁，同时纵观整个事件响应得过程基本符合观察者模式，js订阅html中的事件是否发生，一旦发生即发布内容，js回调相应做出回应

在事件的发展史上，曾经有过一个非常有意思的分歧，浏览器发展初期，还是网景公司和微软争霸天下，当时他们都已经上线了事件机制，但这起中还存在一个他们深深困惑的事情，如click事件，当你原本想点击页面中的一个元素时，同时必定点击了html，body等元素，那么是算先点击了更深层的div等元素呢，还是更表层的html元素呢

网景公司采用事件捕获机制，即先点击最表层
微软公司采用事件冒泡机制，即先点击最深层

当年的两种著名说法促成了现在的统一标准，现在的DOM2中规定，事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，当然IE8以及之前的浏览器还是一如既往的只有冒泡事件。

首先发生事件捕获，可以在捕获的阶段进行截取事件，事件逐层深入，然后到达真正的目标，此时事件就发生了，最后进行冒泡，可以在这个阶段进行事件响应

事件注册时，主要存在事件类型，回调函数，或许还有事件流方式等要点，老一点的可能呈现形式就是DOM0级事件处理方式

elem.onclick = function(){}

DOM2级出现后，定义了addEventListener以及removeEventListener函数，主要优点是可以为某个元素添加多个同一种事件，另外还可以手动选择在什么阶段进行事件处理程序

elem.addEventListener('click', function(){}, false)

参数分别为，事件类型，事件处理程序，是否在捕获阶段进行事件处理程序，为了更好的兼容某些只有冒泡流的浏览器，我们大多时候都是省略最后一个参数，默认选择冒泡。

我们大概粗略整体性介绍完了事件，接下来就深入事件处理程序进入重点——事件对象，事件对象指当事件发生时产生的一个名为event的对象，里面储存着当前事件的信息，如事件类型，触发事件的目标元素，事件流的层次，事件进行到的阶段等等，其生命周期随事件结束而结束。

列一下重要的属性和方法

• bubbles boolean 是否冒泡
• stopPropagation function 取消事件进一步捕获或者冒泡（bubbles为true时可以调用）

---

• cancelable boolean 是否可以取消事件的默认行为
• preventDefault function 取消事件的默认行为（在cancelable为true时可以使用）
• defaultPrevented boolean 是否已经调用preventDefault函数

---

• currentTarget element 正在事件处理的元素
• target element 事件目标，与楼上不相同，这是个不变值
• type string 被处罚的事件的类型
• detail integer 事件相关的细节信息

---

• eventPhase integer 事件处理程序的阶段

• stopImmediatePropagation function 取消事件的进一步捕获或者冒泡，同时阻断事件处理程序被调用

  就在CSDN的markdown编辑页面，我截了个图，google56版event除原型外的所有参数，我们可以看到还是有很多的，其中每个都有着各式各样的用处，比如表示各种位置的，clientx（y），screenx（y），还有整个事件流经过的所有DOM元素的数组path等

  

  可以看到这是一个冒泡，可以取消事件默认行为，目标为a.btn.btn-success的click事件。

让我们用上面的event属性来进行一个事件流整体捕获和冒泡拦截实现

document.getElementById('btn1').onclick = 
    e => {
        console.log(e.eventPhase, e.target === e.currentTarget)
        e.preventDefault()
        e.stopPropagation()
    }//2,true

    document.body.addEventListener( 'click', 
    e => {console.log(e.eventPhase)}, true)//1

    document.body.onclick = 
    e => console.log(e.eventPhase)
    //3，没有stopPropagation才会有结果

上面的情境中，我们点击btn1后，首先在捕获阶段用第二个事件处理程序进行处理，然后到达目标元素btn1后，进入处于目标阶段phase为2，此时target和currentTarget是相同的，最后进入冒泡阶段，此时phase为3。

现在我们应该对事件流有了大概了解了，接下来我们将上面的代码在冒泡阶段实施的行为展开说说

没错，就是事件委托，事件委托利用了事件冒泡的性质，顾名思义，就是将多个子元素的事件响应委托给父元素进行统一管理响应，这在事件处理程序过多时十分有用。

总体来说，事件委托有以下几个优点
1.绑定在高层元素，几乎可以在页面任何生命周期中进行绑定。比如document无需等待页面load完毕就可以进行绑定，大大节省绑定事件消耗时间。
2.绑定事件程序运行时间短。因为其将多个事件绑定程序减少为一个或几个程序。
3.节省绑定事件的内存和性能消耗。每当事件处理程序与页面上的元素绑定后，他们之间就会建立起一个连接，连接数目少了内存消耗就少了，性能也就相应提升了

同时事件委托也有利于我们移除事件处理程序，在实际应用中，我们经常只添加而不移除，这样造成了极大的内存浪费，特别在DOM操作删除节点或者直接innerHTML操作后，DOM节点虽然删除了，但事件处理程序还处在内存中。

最后总结一下，事件处理程序是页面交互的窗口，支持着不同事件类型实现不同的行为，其内部实现符合观察者模式，是一种十分精妙的创造，另外事件发生的流程分为三部分，捕获、目标、冒泡，其中冒泡比较重要，我们经常会利用这个特性进行委托等。

事件处理程序依靠包含着全部事件信息的事件对象进行一系列行为，包括阻止默认行为，事件委托等，最后我们在使用事件的时候要特别注意移除不用的事件处理程序，节省内存，提高性能。