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

# capturing phase

{% hint style="success" %}
[**handlers**](/web/browser/event/handler.md) registered on <mark style="color:yellow;">**container elements**</mark> have the oppertunity to <mark style="color:orange;">**intercept**</mark> events <mark style="color:orange;">**before**</mark> they are delivered to their actual [**target**](/web/browser/event/target.md).

```javascript
// capturing handler, same as {capture: true}
container.addEventListener("click", capturingHandler, true);

// ⭐️ prevent touch screen default actions.
container.addEventListener("touchmove", 
    event => { event.preventDefault() },     
    {passive: false}        // ⭐️ important
);
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
The **optional** <mark style="color:yellow;">**third argument**</mark> to [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) is a <mark style="color:yellow;">**boolean**</mark> value or <mark style="color:orange;">**object**</mark>. If you pass <mark style="color:purple;">**true**</mark>, then the handler is registered as a [**capturing event handler**](/web/browser/event/propagation/capturing.md).
{% endhint %}

{% hint style="danger" %}
If you want to remove a [**capturing event handler**](/web/browser/event/propagation/capturing.md), you <mark style="color:red;">**must**</mark> also pass <mark style="color:yellow;">**true**</mark> as the **third argument** to [removeEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener).
{% endhint %}

{% hint style="danger" %}
:warning: [<mark style="color:purple;">**event.target**</mark>](/web/browser/event/target.md)<mark style="color:orange;">**'s**</mark>**&#x20;**<mark style="color:yellow;">**capturing handlers**</mark> are <mark style="color:red;">**NOT invoked**</mark>❗️
{% endhint %}

{% hint style="success" %}
capturing handlers can be used:

* for <mark style="color:yellow;">**debugging**</mark>
* to <mark style="color:yellow;">**filter events**</mark> so that the target event handlers are never actually invoked.
* for <mark style="color:yellow;">**handling mouse drags**</mark>.
  {% endhint %}
  {% endtab %}

{% tab title="👥 相關" %}

* [touch event](/web/browser/event/type/touch.md) - use <mark style="color:yellow;">`{passive: false}`</mark> to prevent touch screen default actions.
* [default action](/web/browser/event/default-action.md)
  {% endtab %}

{% tab title="🗣 討論" %}

* [How to prevent default handling of touch events?](https://stackoverflow.com/a/49590237/5409815)
  {% endtab %}
  {% endtabs %}