扎实前端系列：简单却容易误解的事件流

事件流的概念不复杂，却很容易误解。同样，如果你觉得自己掌握的清楚，可以尝试猜猜下面的几个例子的输出结果会是什么样。

事件流的两种模型

冒泡和捕获是事件流的两种模型

事件冒泡（event bubbling）是IE的提出的事件流
事件捕获（event capturing）是 Netscape Communicator提出的事件流。

其中目前浏览器采用的默认是冒泡型。

事件流包含三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段。

不论哪种事件模型包含着三个阶段，差异在于在什么阶段处理事件。

我们可以在事件的处理程序中，通过event.eventPhase来获取到处理程序所在的阶段：

value=1 捕获阶段
value=2 处于目标
value=3 冒泡阶段

需要澄清的概念

我们假定DOM元素是层层包裹的洋葱，假定DOM结构为：

<body>
    <div>
        <span>here is span content</span>   
    </div>
</body>

加入点击了span元素，那么在捕获阶段事件的传递序列为：body -> div；在处于目标阶段，事件停留在span；在冒泡阶段，事件的传递序列为：div -> body。

我们在任意一个DOM上点击，比如点击span，或点击div但不点击到span，如果该DOM上有事件处理程序，event.eventPhase必然为2。

结论一：直接点击元素，并触发它上面的事件处理程序，eventPhase一定等于2。

我们能得到event.eventPhase不为2的结果，一定是点击元素和绑定了事件处理程序的不是同一个元素。

先来个简单的例子：

<button id="testBtn""><i>mockicon</i>&nbsp;Click Me</button>
<script>
  const btn = document.getElementById('testBtn');
  btn.addEventListener('click', function(e){
    const evt = e || event;
    console.log(evt.eventPhase);
  }/*,true*/)
</script>

（1）定义了一个 button，在它上面绑定点击事件，直接点击它，事件处理程序获取到的 event.eventPhase 是 2

（2）按钮内部有一个<i class="icon"></i>，点击按钮中的i，事件处理程序获取到的 event.eventPhase 是 3

（3）如果通过addEventListener指定第三个参数为true，采用事件捕获的事件流，点击按钮中的i，事件处理程序获取到的 event.eventPhase 是1

在（2）中之所以输出为3，是因为事件在捕获、冒泡阶段都经过了div，但是在冒泡阶段才被处理；（3）则是在捕获阶段就被处理了。

结论二：在子元素上点击，触发父元素的点击事件，事件对象上的eventPhase为3；点击事件用捕获模型，则eventPhase为1

务必记住的一点是，eventPhase为2只属于直接点击的元素。

你完全懂了吗

拿下面的4个例子玩一玩，看你是否能理解输出结果。如下是页面的css和html结构。

<style>
  div {
    border: 3px solid red;
    padding: 15px;
    width: 500px;
    border-radius: 5px;
    margin-bottom: 5px;
  }
  h3 {
    border: 2px solid green;
  }
  pre {
    border: 1px solid gray;
    padding: 5px;
  }
</style>

<div>
  <h3></h3>
  <pre></pre>
</div>

1. 只在父元素上绑定点击事件

flow-1

<div id="c1" onclick="handler(event)">
  <h3 id="t1"> 测试 #1 只在父元素上绑定点击事件</h3>
  <pre>
    点击子元素H3 或 PRE：
    DIV clicked, phase = 3

    点击其他空白区域：
    DIV clicked, phase = 2
  </pre>
</div>


<script>
  function handler(event) {
    console.log(event.currentTarget.nodeName + ' clicked, phase = ' + event.eventPhase);
  }
</script>

按照结论二，点击h3或pre，自身没有事件处理，只会冒泡到div上，从而eventPhase输出为3。

按照结论一，点击div内的空白区域，相当于直接点击div元素，输出eventPhase为1。

2. 在父、子元素上都绑定点击事件

flow-2

<div id="c2" onclick="handler(event)">
  <h3 id="t2" onclick="handler(event)">测试 #2 在父、子元素上都绑定点击事件</h3>
  <pre>
    点击子元素H3：
    H3 clicked, phase = 2
    DIV clicked, phase = 3

    点击子元素PRE
    DIV clicked, phase = 3

    点击非子元素的空白区域：
    DIV clicked, phase = 2
  </pre>
</div>


<script>
  function handler(event) {
    console.log(event.currentTarget.nodeName + ' clicked, phase = ' + event.eventPhase);
  }
</script>

相对上一个例子的唯一变化是，h3上也绑定了事件处理程序，这里唯一变化的是点击h3的时候的输出。

结合结论一、二，在h3点击时，先触发h3的eventPhase为2，然后再冒泡到div上eventPhase为3。

3. 捕获方式只在父元素上绑定点击事件

flow-3

<div id="c3">
  <h3 id="t3">  测试 #3 捕获方式只在父元素上绑定点击事件</h3>
  <pre>
    点击子元素H3：
    DIV clicked, phase = 1

    点击非子元素的空白区域：
    DIV clicked, phase = 2
  </pre>
</div>

<script>
  function handler(event) {
    console.log(event.currentTarget.nodeName + ' clicked, phase = ' + event.eventPhase);
  }
  
  var c3 = document.getElementById('c3');
  c3.addEventListener('click', handler, true);
</script>

代码跟例子一一样，只是捕获的方式从冒泡修改为了捕获。

根据结论二，点击h3的时候，早于事件到达h3，就在div被捕获了，输出为div eventPhase为1。

点击空白区域，则仍旧满足结论一。

自己曾经不能理解，虽然点击的是h3，但是点击先作用在洋葱的外层（div）上，为什么eventPhase不会是2，这里继续澄清：

eventPhase的值，在“真正”被点击的元素上是2，之前都是1，之后都是3。

4. 在父、子元素上绑定捕获型点击事件

flow-4

<div id="c4">
  <h3 id="t4"> 测试 #4 捕获方式在父、字元素上都绑定点击事件</h3>
  <pre>
    点击子元素H3：
    DIV clicked, phase = 1
    H3 clicked, phase = 2
    
    点击非子元素的空白区域：
    DIV clicked, phase = 2
  </pre>
</div>


<script>
  function handler(event) {
    console.log(event.currentTarget.nodeName + ' clicked, phase = ' + event.eventPhase);
  }

  var c4 = document.getElementById('c4');
  var t4 = document.getElementById('t4');
  c4.addEventListener('click', handler, true);
  t4.addEventListener('click', handler, true);
</script>

根据结论二：点击h3的时候，会先在捕获阶段出发div eventPhase为1的输出，然后到达h3 eventPhase为2的输出。