瀏覽器裡同一個節點上 JavaScript 的事件觸發順序
source link: https://blog.gslin.org/archives/2023/05/08/11176/%e7%80%8f%e8%a6%bd%e5%99%a8%e8%a3%a1%e5%90%8c%e4%b8%80%e5%80%8b%e7%af%80%e9%bb%9e%e4%b8%8a-javascript-%e7%9a%84%e4%ba%8b%e4%bb%b6%e8%a7%b8%e7%99%bc%e9%a0%86%e5%ba%8f/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
瀏覽器裡同一個節點上 JavaScript 的事件觸發順序
瀏覽器裡 JavaScript 的事件觸發順序是先 capture 再 bubble，這個在「Event order」這邊就有一些歷史解釋，IE8 以前只有 capture 模式，到了 IE9+ 才支援，在「Event API: bubbles」這邊也可以看到。
但如果是同一個節點上面的事件觸發順序 (假設同樣是 capture 或是同樣是 bubble)，在「Are event handlers in JavaScript called in order?」這邊有些整理資料。
2000 年的「Document Object Model (DOM) Level 2 Events Specification」這邊提到沒有定義順序：
When the event reaches the target, any event listeners registered on the EventTarget are triggered. Although all EventListeners on the EventTarget are guaranteed to be triggered by any event which is received by that EventTarget, no specification is made as to the order in which they will receive the event with regards to the other EventListeners on the EventTarget.
在早期的 draft「Document Object Model (DOM) Level 3 Events Specification」裡面可以看到：
Next, the implementation must determine the current target's candidate event listeners. This must be the list of all event listeners that have been registered on the current target in their order of registration. [HTML5] defines the ordering of listeners registered through event handler attributes.
但在最新的「UI Events」(要注意這還是 draft，在 2016 年更新的) 則是拿掉了這段。
所以在設計架構時，正常還是得保守的假設沒有保證執行順序...
Related
Chrome 對各種 JavaScript 的優先順序
前陣子看到「JavaScript Loading Priorities in Chrome」這篇，在分析 Google Chrome 對各種 JavaScript 的優先順序。 優先順序分成讀取的「Loading priority (network/Blink)」與執行的「Execution priority」，另外文章裡也有整理建議「Where should this be used?」。 看起來 at the end of 是全部裡面最低的，建議是給 Load "Related articles" 或是 "Give feedback" 這類功能，不過應該沒什麼人真的這樣用... 然後要注意的是，這邊分析的對象是 Google Chrome，實際在設計時應該要先考慮一般性的定義，再考慮對各瀏覽器的最佳化... (雖然以現在市占率來說沒什麼人想管其他瀏覽器...)
March 4, 2019In "Browser"
分散式系統的 clock
前幾天在 Hacker News 上看到「Clocks and Causality – Ordering Events in Distributed Systems (2022) (exhypothesi.com)」這篇，講分散式系統上 clock 的設計，作者也有跑出來在 Hacker News 上面跟大家聊一下 (帳號是 thoughtlede)，原文在「Clocks and Causality - Ordering Events in Distributed Systems」這邊。 文章裡面主要講空間是 的 Lamport timestamp 與空間是 的 Vector clock (這邊的 相對於節點數量)，以及這兩個對應的擴充版本： 作者會整理這些資料的原因是因為在研究 CRDT 的時候看到演算法中常常會需要處理分散式系統裡面事件的順序，所以花了一些時間整理常見的方式： Author here. Pleasantly surprised to see the article…
April 10, 2023In "Computer"
Vector clock 的發明時間軸
一樣是在 Hacker News 上看到「Who invented vector clocks? (decomposition.al)」這篇文章，在找出誰發明了 vector clock，原文在「Who invented vector clocks?」。 主要有兩個不同的時間點，一個是 vector clock 概念的提出，另外一個是第一次用到 vector 這個詞。 這篇讓我覺得有趣的地方是，vector clock 本來就是在處理分散式系統裡面事件順序的問題，而這篇文章則是在找出真實世界裡面這些發明的先後順序，而且也牽扯到了各種 citation (類比到分散式系統裡事件的 dependency)。
April 10, 2023In "Computer"
Leave a Reply
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Notify me of follow-up comments by email.
Notify me of new posts by email.
To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)
Post navigation
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK