# event propagation

[browser](..) ⟩ [event]() ⟩ propagation

{% hint style="success" %}
the process by which the browser decides <mark style="color:yellow;">**which objects**</mark> to trigger [**event handlers**](handler) on.
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %}
<figure><img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FXXVTiPrt569rf3XWEUWq%2Fcapture-bubble-phase.png?alt=media&#x26;token=0d9fbcb2-b8b0-48b7-bdaf-7abfadb52c48" alt=""><figcaption><p>capturing/bubbling phsse</p></figcaption></figure>
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
<mark style="color:yellow;">**3 phases**</mark> of event propagation:

1. (“<mark style="color:yellow;">**capturing**</mark>” phase) occurs <mark style="color:orange;">**before**</mark> the target handlers are invoked.&#x20;
2. target handlers invoked.
3. (“<mark style="color:yellow;">**bubbling**</mark>” phase) event bubbling.&#x20;
{% endhint %}

{% hint style="success" %}
* <mark style="color:yellow;">**most**</mark>**&#x20;events** [**bubble up**](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**](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:orange;">**capturing phase**</mark> is like the bubbling phase **in reverse**.&#x20;

* <mark style="color:yellow;">**capturing handlers**</mark> of the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object are invoked first.
* then the <mark style="color:yellow;">**capturing handlers**</mark> of the [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document) object, and so on.
* :warning: <mark style="color:orange;">**event target's capturing handlers**</mark> are <mark style="color:red;">**NOT invoked**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [bubbling](propagation/bubbling "mention")
* [hide-or-not-to-hide](default-action/hide-or-not-to-hide "mention")
* [stop](propagation/stop "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JavaScript The Definitive Guide (15.2 Events)
{% endtab %}

{% tab title="📘 手冊" %}
* [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window)
* [Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
{% endtab %}

{% tab title="👥 相關" %}
* [register](handler/register "mention")
{% endtab %}
{% endtabs %}
