捕获和冒泡

请看下图：

当我们图中深蓝色的<td>元素上的绑定的事件触发时，我们会先从 Window 出发，一直向下，查找此路径上是否还绑定了其他事件，若有，则执行，这个阶段我们称之为捕获阶段。

等到了真正要执行<td>上绑定的事件的时候， 将其称之为目标阶段

执行完此事件， 还会有一个从此节点开始，沿着原来的路径依次向上查找是否还绑定了其他事件，若有，则执行，这个阶段，称为冒泡阶段

那么在这个路径上绑定的事件不会被执行两次吗？

不会，一个事件在捕获阶段执行还是在冒泡阶段执行，是取决于程序员的。

举个例子：

x.addEventListener('click', fn, bool)

是用来在x上绑定监听事件的函数，参数'click'的意思是点击触发'fn' 函数， 最后的bool则是程序员用来选择函数在捕获阶段执行还是冒泡阶段执行的选项，若为 true 则在捕获阶段执行，若为 false， 则在冒泡阶段执行。

一些小细节

假设说我们有一个单独的div 元素，它的上层元素均没有绑定事件，我们分别对它添加监听函数

div.addEventListener('click', fn1,)

div.addEventListener('click', fn2, true)

然后我们点击它

那么执行顺序是什么呢 答案是先执行 fn1，再执行 fn2