> 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.md).

# event propagation

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ propagation

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

{% tabs %}
{% tab title="🗺️ 圖表" %}

<figure><img src="/files/xRjxHyIvos7il7WKvzOg" 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**](/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: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 phase](/web/browser/event/propagation/bubbling.md)
* [hide or not to hide?](/web/browser/event/default-action/hide-or-not-to-hide.md)
* [stop propagation](/web/browser/event/propagation/stop.md)
  {% 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](/web/browser/event/handler/register.md)
  {% endtab %}
  {% endtabs %}