Chrome 89 更新事件触发顺序，导致99%的文章都错了（包括MDN）

「爱情、让人受尽委屈。」 2022-10-16 07:26 82阅读 0赞

大家好，我是秋风。

嗯...我又来了，这次又是在...楠溪和的讨论中产生的问题。

那事情是怎么样的呢？

## 起因 ##

最近楠溪在看事件相关的文章，然后就跑来和我讨论说以下代码的执行效果和网上的文章不一致，代码如下:

<div>
     <button>123</button>
    </div>
    <script>
      var btn = document.querySelector('button');
      var div = document.querySelector('div');
      btn.addEventListener('click', function () {
        console.log('bubble', 'btn');
      }, false);
      btn.addEventListener('click', function () {
        console.log('capture', 'btn');
      }, true);
      div.addEventListener('click', function () {
        console.log('bubble', 'div');
      }, false);
      div.addEventListener('click', function () {
        console.log('capture', 'div');
      }, true);
    </script>

以上是一段很简单的事件注册的代码，然后我们点击 `button`。

先不看结果，思考一下。

![d84d6b5e01f90df8420af508759467ec.png][]

然后我们来看看结果

![929a69c51d7243a5162e9fca3d9bba33.gif][]

对于绝大多数前端老鸟来说，会脱口而出地说出以下顺序。

capture div
    bubble btn
    capture btn
    bubble div

## 探索 ##

但是不管是MDN，还是网上大多数的教程而言说的都是这个顺序。

![22fbe3cf8794c4db76a7246e0ca32144.png][]  
![4e12ae7206084be59430f46b2447ea26.png][]  
![4bd04f821d9d84175d8f38f3709c163c.png][]

对于这个现象，我感到很迷惑，我依稀记得，在几个月前，Chrome 还不是这样的行为，盲猜是不是因为 Chrome 版本的问题呢？

以上动图的 Chrome 版本是 90.0.4430.212

因此我找了个 Chrome 版本为 84.0.4109.0 进行测试。

![29cef6c0ac9fd5d64d2541b6ff886d3d.png][]

果然是版本的问题，但是事情的追踪依然很难，由于搜索了规范以及查了谷歌上的一些资料，并没有很好地帮助我解决这个疑惑，我不确定是因为 Chrome 引入的 bug 还是出现了什么问题。

因此我就向 chromium 报告了这个问题。

![7c1d22ff2f7d152bee4341b28f40ac91.png][]

最终在 Chrome 开发人员的帮助下，找到了这两个讨论

https://github.com/whatwg/dom/issues/685

![4d61f8062bf5803910cd170c57c3fe8f.png][]

https://github.com/whatwg/dom/issues/746

![c405cb7b8b6174c193b515fa0c830ae0.png][]

在上述 issues 中可以看到， 起因是在 https://bugs.webkit.org/show\_bug.cgi?id=174288 中，有人指出，在 webkit 中当前的事件模型，会导致含有 Shadow DOM 的情况下，子元素的捕获事件会优先于父元素的捕获事件触发。

![9cb71cb030f23457375a21bdf425b7a6.png][]

而在旧模型中，一旦达到 AT\_TARGET ，所有注册的监听器就将按照顺序被触发，而不管他们是否被标记为捕获。由于 Shadow DOM 会创建多个 targets ，导致了事件执行顺序的错误。

而上述问题在 Gecko （Mozilla Firefox 的排版引擎）却运行正常（先捕获再冒泡）。为此 whatwg 提出了一个新的模型结构来解决这个问题。

![0cc218121cef317b332b5f8307193ae7.png][]

## 结论 ##

所有的疑问到此都迎刃而解了，到现在为主我们梳理一下我们的问题。

<table> 
 <thead> 
  <tr> 
   <th><br></th> 
   <th>1.按照旧版本事件触发机制</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>表现</td> 
   <td>目标元素触发事件顺序和注册事件顺序有关</td> 
  </tr> 
  <tr> 
   <td><br></td> 
   <td><strong>2.新的的事件触发机制</strong></td> 
  </tr> 
  <tr> 
   <td>表现</td> 
   <td>目标元素触发事件顺序按照先捕获再冒泡的顺序触发</td> 
  </tr> 
 </tbody> 
</table>

而这个版本分界线是在 Chrome 89.0.4363.0 和 89.0.4358.0。

而 Chrome 89.0.4363.0 是在 2020-12-22 发布的，也就是最近几个月的事情，因此近几个月如果你的Chrome 更新了就会遇到和我一样的现象。

在 Chrome 89.0.4363.0 以及之后版本中，**目标元素的触发事件顺序不再按照注册顺序触发**！**而是按照先捕获再冒泡的形式依次执行！**

然后我们再来看看这样修改会给我们带来怎么样的影响。

1.  首先我们要明确是的，网上以前的大部分文章已经不适用于当下的 Chrome 新版本了！
2.  如果我们业务中有依赖相关的事件触发顺序，请仔细检查！

举个????

<div>
     <button>123</button>
    </div>
    <script>
      var a = [];
      var btn = document.querySelector('button');
      var div = document.querySelector('div');
      btn.addEventListener('click', function () {
        console.log('bubble', 'btn');
        a.push(1);
      }, false);
      btn.addEventListener('click', function () {
        console.log('capture', 'btn');
        a.push(2);
      }, true);
      div.addEventListener('click', function () {
        console.log('bubble', 'div');
      }, false);
      div.addEventListener('click', function () {
        console.log('capture', 'div');
      }, true);
    </script>

在新版本中，当 button 元素被点击后，最终 a 的结果为 \[2,1\]，而在旧版本中，这个结果则为 \[1,2\]。

那对于现阶段一些线上代码改如何改造呢？

## 改进方案 ##

那么现在我们无法控制用户使用哪个版本的浏览器，该如何解决这个问题而来避免遇到线上问题呢？

其实很简单。

我们只需要将所有目标元素代码的顺序都按照先书写捕获事件代码，再书写冒泡事件代码，就可以兼容本次的更新。

## 思考 ##

所有的事情都不是一成不变的，不管是对于一些相对官方的文章或者教程我们都要抱以怀疑的态度，相信我们所看到的。也许我这篇的言论在多年之后也会是一个错误示例，但是是对当下问题的一个记录。本文也还有很多不足之处，如果有问题请在评论中指出。

## 参考资料 ##

https://chromium.cypress.io/

https://github.com/whatwg/dom/issues/685

https://bugs.webkit.org/show\_bug.cgi?id=174288

https://github.com/whatwg/dom/issues/746

https://dom.spec.whatwg.org/\#dispatching-events

[![e86ab539a1d1cd591d5ad5914cec4516.png][]][e86ab539a1d1cd591d5ad5914cec4516.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![8257153a93144bdea7ffdd0902e9f9d3.png][]

[d84d6b5e01f90df8420af508759467ec.png]: /images/20221014/e77e96669bbb46db8b2e68ca1e09a34d.png
[929a69c51d7243a5162e9fca3d9bba33.gif]: /images/20221014/009501738da341bcae30f6bbce1d0fc7.png
[22fbe3cf8794c4db76a7246e0ca32144.png]: /images/20221014/18204e81b41049e1a0977c5022782db3.png
[4e12ae7206084be59430f46b2447ea26.png]: /images/20221014/f2c3a7e1843246d5a978e9c473f57110.png
[4bd04f821d9d84175d8f38f3709c163c.png]: /images/20221014/798814611e994a269b2f379175232fa7.png
[29cef6c0ac9fd5d64d2541b6ff886d3d.png]: /images/20221014/4efe7237f7a34bab8e4112a8e42310dc.png
[7c1d22ff2f7d152bee4341b28f40ac91.png]: /images/20221014/06367bb59a2648ef8c4d62ba382021b4.png
[4d61f8062bf5803910cd170c57c3fe8f.png]: /images/20221014/f348eb71c8b2406cbcf8252162644236.png
[c405cb7b8b6174c193b515fa0c830ae0.png]: /images/20221014/1bf20d95f8e34026a682de5d2e8eb41f.png
[9cb71cb030f23457375a21bdf425b7a6.png]: /images/20221014/699f39b9bbf34c12b8cd407532c06094.png
[0cc218121cef317b332b5f8307193ae7.png]: /images/20221014/aba811c84d804c2aa1e36cf4c00e3b23.png
[e86ab539a1d1cd591d5ad5914cec4516.png]: /images/20221014/a3c21c4ef8f84064a79e4cd31c6878a8.png
[e86ab539a1d1cd591d5ad5914cec4516.png 1]: http://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ%3D%3D&chksm=8891f65ebfe67f48fd731f105053a589e02ddf1fbfa949f5e51ac3004cb531670f1dcfffc585&idx=1&mid=2650596986&scene=21&sn=3e2b70e4a516f313d3dc0a60922eb8e8#wechat_redirect
[8257153a93144bdea7ffdd0902e9f9d3.png]: /images/20221014/42393007237c4da0a8ca09e11bc2a614.png