瀏覽器裡同一個節點上 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 年更新的) 則是拿掉了這段。

所以在設計架構時,正常還是得保守的假設沒有保證執行順序...

Mozilla 把對各種規格的態度整理成一個網頁

查資料的時候看到「Mozilla Specification Positions」這個,可以看到 Mozilla 對各種規格的態度,分成幾個不同的類型。

有「under consideration」、「important」、「worth prototyping」這幾個從名字上就大概猜的出來意思,接下來的幾個比較有趣的是「non-harmful」、「defer」與「harmful」。

官方的說明是:

  • under consideration: Mozilla's position on this specification is being discussed.
  • important: This specification is conceptually good and is important to Mozilla.
  • worth prototyping: Mozilla sees this specification as conceptually good, and worth prototyping, getting feedback on its value, and iterating.
  • non-harmful: Mozilla does not see this specification as harmful, but is not convinced that it is a good approach or worth working on.
  • defer: Mozilla does not intend to look at this specification at all in the near future.
  • harmful: Mozilla considers this specification to be harmful in its current state.

所以之後看到一些標準時可以過來這邊看看 Mozilla 的態度...

幾個 Web API Manager 要設定的東西...

在上一篇提到的「控制瀏覽器裡的 Web API」,用了一兩天後有遇到一些問題,大概整理一下...

  • Gmail 會開不起來,需要將 mail.google.com 列入白名單 (一個阻擋條件都不能設),這是因為遇到瀏覽器的 bug,在「General breakage on specific site · Issue #55 · snyderp/web-api-manager」這邊作者有找到問題,他判斷是瀏覽器的問題後開了 ticket 給 FirefoxChrome,不知道什麼時候會好...
  • 同理,Facebook 右上角的通知也出不來,也是同樣的問題,需要把 www.facebook.com 列入白名單。
  • 另外是 Google Maps 用滑鼠滾輪滾動本來是平滑式的縮放,現在用起來會變成階段式的縮放,原因是 Google Maps 用到 WebGL Specification (在 Lite 裡面會阻擋)。這有兩個方向可以改,一個是把 www.google.com (或是 www.google.com.tw,看你用的網域) 另外開一組設定管理,另外一個是直接把 WebGL Specification 的阻擋關掉。

目前遇到的大概就是這些了...

硬派學 JavaScript...

前幾天看到「Someone emailed me asking for tips or sites for learning JavaScript, and this is my final answer.」這篇也是頗有趣的...

Read the ECMAScript specification.

下面還花了些篇幅解釋要怎麼讀 XDDD

Don’t feel like you have to understand every word. Give yourself permission to just force the words into your brain, and move on to the next section. If you’re diligent about it, it only takes a few hours. Repeat this process every few years.

超硬派的 XDDD