浅谈事件冒泡 - 码农教程

前端开发中不可避免会接触到事件冒泡，今天简单记录一下处理事件冒泡的一点经验，谈不上心得，聊当抛砖引玉。

不谈移动端，以PC浏览器的click事件为例。

事件冒泡机制最初是由微软提出的，而事件捕捉机制是由NetScape提出的，这两种机制是完全不同的事件流处理机制，平常较多地被认为是事件冒泡的两种方式，其实是不严谨的。

冒泡事件流

简单来讲，以click为例，冒泡事件流就是从被点击的节点一层层的向上冒泡，直到<body>节点，这也是被大多数人熟知的方式，在此便不再赘述。

IE浏览器通过attachEvent()和detachEvent()方法来添加和删除事件监听。

捕捉事件流

NetScape提出的捕捉式事件流处理机制，跟冒泡事件流完全相反，是从最外层容器(也就是<body>)开始往里传递事件。

IE内核以外的浏览器通过addEventListener()来添加事件监听。

值得一提的是，addEventListener(type,handler,is)有三个参数，前两个参数分别是事件类型和事件响应函数，第三个参数是个Boolean值，被普遍使用的是false，当它被设置为false的时候，捕捉事件流跟冒泡事件流的顺序是一致的，也就是从里往外传递。栗子如下：

See the Pen ZYGYxB by Joe (@ihardcoder) on CodePen.

弹出窗口的顺序为3-2-1。

当第三个参数被设置为true时，便采用原始的捕捉事件流，也就是跟冒泡事件流相反的顺序，栗子如下：

See the Pen LEVEBm by Joe (@ihardcoder) on CodePen.

弹出窗口的顺序为1-2-3。

当然，平时被使用较广的是冒泡式的传递方式，但捕捉事件流也有其用武之地。IE9以上的浏览器也支持addEventListener()方法。