custom events

JS ⟩ browser ⟩ events ⟩ custom events

🔴 主題

• event.isTrusted - event comes from browser (true) or script (false).

• bubbling phase

💈範例

<h1 id="h1">Hello for John!</h1>

<script>
  // catch on h1
  h1.addEventListener("hello", function(e) {
    console.log(e.detail.name);
  });

  // ⭐️ custom event
  let event = new CustomEvent("hello", {
    detail: { name: "John" }    // ⭐️ custom info in `detail` property
  });
  
  // dispatch on h1
  h1.dispatchEvent(event);
</script>

📗 參考

• JS.info ⟩

  • Dispatching custom events

  • MouseEvent, KeyboardEvent, ...

• JavaScript The Definitive Guide (15.2 Events)

📘 手冊

• Events

• Event ⟩

  • Event( «event name», {bubbles: false, cancelable: false, composed: false} )

• CustomEvent

• target.dispatchEvent(event)

👥 相關

• Events that Cross Shadow DOM Boundary - event.composed