再探事宜的三个阶段

2019年8月31日 160次阅读 来源: 方泉水很甜

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

<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事宜。我以为合理的设想应该是先触发动画再触发事宜，有两种能够性：

    • 浏览器在事宜流传前触发动画，无论是捕捉照样冒泡，对动画触发前后没有影响；

    • 浏览器在在事宜流传历程当中触发动画，那末动画触发递次能够和采纳捕捉照样冒泡有关联；

请不吝赐教。

    原文作者：方泉水很甜
    原文地址: https://segmentfault.com/a/1190000006949463
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞