JavaScript事件冒泡机制如何详细解析示例？

本文共计877个文字，预计阅读时间需要4分钟。

什么是冒泡？

DOM事件流（event flow）存在三个阶段：事件捕获阶段、处理目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或触发其他DOM事件时，事件会从最顶层的window开始，逐级向下传递到目标元素。

什么是冒泡？

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、 处于目标阶段、 事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

addEventListener()方法

这个方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是：

addEventListener(event, function, useCapture)

参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。