🔰event propagation

browser ⟩ event ⟩ propagation

the process by which the browser decides which objects to trigger event handlers on.

🗺️ 圖表

capturing/bubbling phsse

⭐️ 重點

3 phases of event propagation:

1. (“capturing” phase) occurs before the target handlers are invoked.

2. target handlers invoked.

3. (“bubbling” phase) event bubbling.

• most events bubble up to the Document object, and then to the Window object, notable exceptions are the “focus” “blur,” and “scroll” events.

• a handler can stop the event from bubbling by calling event.stopPropagation().

The capturing phase is like the bubbling phase in reverse.

• capturing handlers of the Window object are invoked first.

• then the capturing handlers of the Document object, and so on.

• ⚠️ event target's capturing handlers are NOT invoked.

🔴 主題

• bubbling phase

• hide or not to hide?

• stop propagation

📗 參考

• JavaScript The Definitive Guide (15.2 Events)

📘 手冊

• Window

• Document

• Element

👥 相關

• register handler