🔰bubbling phase

JS ⟩ browser ⟩ events ⟩ custom ⟩ 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 “load” event on document elements bubbles, but it stops bubbling at the Document object and does not propagate on to the Window object.

💈範例

<h1 id="h1">Hello from the script!</h1>

<script>
  // catch on document
  document.addEventListener("hello", function(e) {
    console.log("Hello from " + e.target.tagName); // Hello from H1
  });

  // ⭐️ bubbling event
  let event = new Event("hello", {bubbles: true}); 
  
  // dispatch on h1
  h1.dispatchEvent(event);
</script>

📘 手冊

• Event ⟩ .stopPropagation()