再探事件的三个阶段

我的原文链接：再探事件的三个阶段
偶然间看到一篇经典博客，文中有一个例子挺有意思，大概是：

<div id="p">parent</div>
<script>
    var p = document.getElementById('p');
    p.addEventListener('click', function(e) {
        alert('parent节点冒泡')
    }, false);
    p.addEventListener('click', function(e) {
        alert('parent节点捕获')
    }, true);
</script>

问点击div时，事件触发的顺序是什么？

---

根据事件的三个阶段，我最初推测应该是先触发捕获事件再触发冒泡事件，但实际结果却是先弹出冒泡再弹出捕获。这是为什么呢？
事情先要从 addEventListener() 方法说起，MDN文档中关于此方法有明确描述：

如果事件监听器恰好注册到了事件目标上，那么这个事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。在目标阶段的事件会触发所有的监听器，而不在乎这个监听器到底在注册时 useCapture 参数值是什么。

也就是说如果我们直接单击目标，那么当事件被触发时，event target正处于第二阶段，这时所有的事件按照注册先后顺序触发，与是否设置第三个参数无关。

---

event 对象中有一个字段专门用于描述事件当前是处于哪个阶段：eventPhase：

• 0：当前没有事件需要处理；

• 1：捕获阶段，事件从window传递到目标；

• 2：命中阶段，事件已经到达目标；

• 3：冒泡阶段，事件从目标传达到最顶层的window的过程；

W3C标准中有一张图描述了这个过程：

其中提到的三个阶段是 capture phase，target phase，bubble phase，事件对象的传播是根据 propagation path 进行的。完整的例子如下：
codepen

我对事件的整个生命周期的各个阶段的了解其实是非常有限的，个人推测如下：

• 操作系统捕获事件（点击、触摸等）；

• 浏览器从操作系统那里获得事件的相关信息并生成事件对象；

• 浏览器计算事件传播的路径；

• 按照路径传播并触发相应节点上的事件；

• 最后由浏览器销毁事件对象；

基于以上猜测，有几点不是很明白：

1. 为什么要设计成三个阶段？

   有些地方是讲的：因为历史原因——N公司提倡捕获，M公司提倡冒泡，两个公司互不妥协，于是标准组织干脆兼容两者，让事件跑一个来回，倘若不支持某个过程则静默出进入相关阶段就好。久而久之，大家都认了这个规则，但是实际上来说让事件跑一个来回效率上肯定是不高的，而且从我的理解来看只进行捕获或者冒泡也是合乎逻辑的。所以为什么现代浏览器（比如chrome）要同时支持两种传播方式呢？

2. 传播路径如何确定？

   上文中说到事件在传播前，浏览器会先为其计算出传播路径，然而DOM树表面上看并不是一棵查找二叉树，只是一种描述层级关系的树状数据结构。那么假设浏览器从操作系统拿到了事件的基本信息（点击位置，哪个键位，发生时间等），浏览器怎么在这样的树状结构中查找出一条确定的路径呢？遍历当然是可以的，但是这样效率是否太低？如果每个元素都有一个独一无二的ID，对这个路径查找问题有帮助吗？

3. 事件与其它过程如何交互？

   问题可能说的有点抽象，假设我们在div元素上绑定了一个hover动画，那么当鼠标划过时需要发生两件事情：展示动画和触发mouseover事件。我觉得合理的设计应该是先触发动画再触发事件，有两种可能性：

   • 浏览器在事件传播前触发动画，无论是捕获还是冒泡，对动画触发先后没有影响；

   • 浏览器在在事件传播过程中触发动画，那么动画触发顺序可能和采用捕获还是冒泡有关系；

---

请不吝赐教。