> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/propagation/bubbling.md).

# bubbling phase

[JS](/web/js.md) ⟩ [browser](/web/browser.md) ⟩ [events](/web/browser/event.md) ⟩ [custom](/web/browser/event/custom.md) ⟩ bubbling

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}

* <mark style="color:yellow;">**most**</mark>**&#x20;events** [**bubble up**](/web/browser/event/propagation/bubbling.md) to the [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document) object, and then to the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object, notable **exceptions** are the “<mark style="color:purple;">**focus**</mark>” “<mark style="color:purple;">**blur**</mark>,” and “<mark style="color:purple;">**scroll**</mark>” events.&#x20;
* a [**handler**](/web/browser/event/handler.md) can <mark style="color:yellow;">**stop the event from bubbling**</mark> by calling [event.stopPropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation).
  {% endhint %}

{% hint style="warning" %}

* The “<mark style="color:purple;">**load**</mark>” event on **document** [<mark style="color:yellow;">**elements**</mark>](https://developer.mozilla.org/en-US/docs/Web/API/Element) bubbles, but it <mark style="color:red;">**stops bubbling**</mark> at the [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document) object and <mark style="color:red;">**does not propagate**</mark> on to the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object.
  {% endhint %}
  {% endtab %}

{% tab title="💈範例" %}

```markup
<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>
```

{% endtab %}

{% tab title="📘 手冊" %}

* [Event](/web/browser/event.md) ⟩ [.stopPropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation)
  {% endtab %}
  {% endtabs %}