Chrome 89 更新事件觸發順序，致使99%的文章都錯了（包括MDN）

時間 2021-05-25

標籤 html 前端 git github web 面試 segmentfault 瀏覽器 dom 測試欄目 Chrome 简体版

原文原文鏈接

你們好，我是秋風。html

嗯...我又來了，此次又是在...楠溪和的討論中產生的問題。前端

那事情是怎麼樣的呢？git

原由

最近楠溪在看事件相關的文章，而後就跑來和我討論說如下代碼的執行效果和網上的文章不一致，代碼以下:github

<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。web

先不看結果，思考一下。面試

而後咱們來看看結果segmentfault

對於絕大多數前端老鳥來講，會脫口而出地說出如下順序。瀏覽器

capture div
bubble btn
capture btn
bubble div

探索

可是不論是MDN，仍是網上大多數的教程而言說的都是這個順序。dom

對於這個現象，我感到很迷惑，我依稀記得，在幾個月前，Chrome 還不是這樣的行爲，盲猜是否是由於 Chrome 版本的問題呢？測試

以上動圖的 Chrome 版本是 90.0.4430.212

所以我找了個 Chrome 版本爲 84.0.4109.0 進行測試。

果真是版本的問題，可是事情的追蹤依然很難，因爲搜索了規範以及查了谷歌上的一些資料，並無很好地幫助我解決這個疑惑，我不肯定是由於 Chrome 引入的 bug 仍是出現了什麼問題。

所以我就向 chromium 報告了這個問題。

最終在 Chrome 開發人員的幫助下，找到了這兩個討論

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

在上述 issues 中能夠看到，原由是在 https://bugs.webkit.org/show_... 中，有人指出，在 webkit 中當前的事件模型，會致使含有 Shadow DOM 的狀況下，子元素的捕獲事件會優先於父元素的捕獲事件觸發。

而在舊模型中，一旦達到 AT_TARGET ，全部註冊的監聽器就將按照順序被觸發，而無論他們是否被標記爲捕獲。因爲 Shadow DOM 會建立多個 targets ，致使了事件執行順序的錯誤。

而上述問題在 Gecko （Mozilla Firefox 的排版引擎）卻運行正常（先捕獲再冒泡）。爲此 whatwg 提出了一個新的模型結構來解決這個問題。

結論

全部的疑問到此都迎刃而解了，到如今爲主咱們梳理一下咱們的問題。

	1.按照舊版本事件觸發機制
表現	目標元素觸發事件順序和註冊事件順序有關
	2.新的的事件觸發機制
表現	目標元素觸發事件順序按照先捕獲再冒泡的順序觸發

而這個版本分界線是在 Chrome 89.0.4363.0 和 89.0.4358.0。

而 Chrome 89.0.4363.0 是在 2020-12-22 發佈的，也就是最近幾個月的事情，所以近幾個月若是你的Chrome 更新了就會遇到和我同樣的現象。

在 Chrome 89.0.4363.0 以及以後版本中，目標元素的觸發事件順序再也不按照註冊順序觸發！而是按照先捕獲再冒泡的形式依次執行！

而後咱們再來看看這樣修改會給咱們帶來怎麼樣的影響。

首先咱們要明確是的，網上之前的大部分文章已經不適用於當下的 Chrome 新版本了！
若是咱們業務中有依賴相關的事件觸發順序，請仔細檢查！

舉個🌰

<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]。

那對於現階段一些線上代碼改如何改造呢？