# bubbling phase

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [browser](https://lochiwei.gitbook.io/web/browser) ⟩ [events](https://lochiwei.gitbook.io/web/browser/event) ⟩ [custom](https://lochiwei.gitbook.io/web/browser/event/custom) ⟩ bubbling

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

* <mark style="color:yellow;">**most**</mark>**&#x20;events** [**bubble up**](https://lochiwei.gitbook.io/web/browser/event/propagation/bubbling) 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**](https://lochiwei.gitbook.io/web/browser/event/handler) 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="📘 手冊" %}

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