# remove handler

[JS](../../../js) ⟩ [browser](../..) ⟩ [event](..) ⟩ [handler]() ⟩ [register](register) ⟩ remove

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %}
If you want to <mark style="color:yellow;">**remove**</mark> a [**capturing event handler**](../propagation/capturing), 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" %}
To **remove** a handler we need exactly the <mark style="color:yellow;">**same function**</mark> as was assigned.

```javascript
// ❌ this won't work❗️ 
// ⭐️ same code but different functions ↴
//                                ╭────────────────────╮
elem.addEventListener   ("click", () => alert('Thanks!'));
elem.removeEventListener("click", () => alert('Thanks!'));

// ✅ the right way
//                    same function ↴
function handler(){ ... }    //   ╭─────╮
elem.addEventListener   ("click", handler);
elem.removeEventListener("click", handler);
```
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* removing a [capturing-handler](register/capturing-handler "mention")
{% endtab %}
{% endtabs %}
