WebKit 的事件处理流程

WebKit 浏览器是一个由事件驱动的设计模式，只有事件不断的发送并被指定的目标接收到，程序才能执行

事件的发送自不必说，任何时刻都可以根据需求向目标结点发送事件，并在目标结点注册监听器，当接收到

事件时，触发响应操作。

针对同一个事件，可能有多个结点都注册了监听器，那到底由哪个结点的监听程序处理，又或者多个结点的

监听处理先后顺序是如何：

监听处理顺序有三种：冒泡、捕获和目标，常用的为前两种，即 addEventListener 的第三个参数 useCapture 指定。

addEventListener 有三个参数：
第一个参数表示事件名称（不含 on，如 "click"）；
第二个参数表示要接收事件处理的函数；
第三个参数为 useCapture，本文就讲解它。

测试代码：

<div id="outDiv">
  <div id="middleDiv">
    <div id="inDiv">在此点击鼠标。</div>
  </div>
</div>
<div id="info"></div>

var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

上述是我们测试的代码，根据 info 的显示来确定触发的顺序，
有三个 addEventListener，而 useCapture 可选值为 true 和 false，
•全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；
•全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；
•outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；
•middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；

(1)如果将useCapture设置为true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 

捕获阶段处理，即事件从 DOM 根结点开始遍历目标结点，碰到有注册 监听该事件的结点时，立即执行结点

的监听处理程序，处理结束，继续从该结点往下遍历，每次碰到都直接执行监听程序。

(2)如果useCapture为false，则侦听器只在目标或冒泡阶段处理事件。 

冒泡阶段处理，即事件遍历DOM时，碰到有注册 监听该事件的结点时，暂时不执行监听程序，直到遍历结束找到

最后一个注册了该事件监听的结点后，开始冒泡逆向遍历DOM树，在逆向遍历过程中，碰到监听该事件的结点时，

才执行监听程序

两种监听程序的执行方案而已，触发时间点不同