🔰Event

browser ⟩ event

the object that

• is asscociated with a particular event

• contains details about that event

• is passed as an argument to the event handler.

⭐️ 重點

properties of an Event object

• type (string) - event.type.

• target (EventTarget) - object on which the event occurred. (event.target)

• currentTarget (EventTarget) - the object on which the current handler was registered. (in the handler, this === event.currentTarget.)

• timeStamp - relative timestamp (in ms).

• isTrusted - event dispatched by browser (true) or script (false).

🔴 主題

• event.type - "load", "click", "transitioned" ...

• event.target

• event dispatching

• default action

  • hide or not to hide?

• event handler

  • register handler

  • invocation context

• event propagation

  • bubbling phase

  • stop propagation

• custom events

• "change" event

💈範例

• replit ⟩

  • event.currentTarget

  • "this" in event handler (this === event.currentTarget )

📗 參考

• JavaScript The Definitive Guide (15.2 Events)

• Eloquent JS ⟩ Ch. 15: Event Handling

• JS.info ⟩ Browser: Document, Events, Interfaces ⟩ Introduction to Events

• An Introduction To DOM Events

📘 手冊

• Event ⟩

  • .currentTarget

👥 相關

• Bubbling in Shadow DOM

• DOM hierarchy