Suggest an edit

Improve this article

Refine the answer for “An anonymous function as a handler”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Short answer:

> It is not possible to remove an event handler if it was declared as an anonymous function.

But let's look at *why* and *what to do about it*.

## 1. Why you cannot remove an anonymous handler

The `removeEventListener()` method requires **the exact same function**
that was passed to `addEventListener()`.

### Example:

```javascript
button.addEventListener('click', () => console.log('hi'));
button.removeEventListener('click', () => console.log('hi')); // will not work
```

Every time you write `() => ...`, a **new function** is created in memory.
The browser cannot tell that it is "the same" function, so it does not remove the handler.

## 2. The correct way - move the function into a separate variable

```javascript
function handleClick() {
  console.log('hi');
}

button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick); // works
```

Here `handleClick` is *the same function object*,
so `removeEventListener` can find and remove it.

## 3. If you really need to remove an anonymous handler

You can save a reference to it in advance:

```javascript
const handler = () => console.log('hi');

button.addEventListener('click', handler);

// later
button.removeEventListener('click', handler);
```

The key is that `handler` remains **the same function object**.

## 4. If there are many handlers, you can use `AbortController`

A modern and elegant way:

```javascript
const controller = new AbortController();

button.addEventListener('click', () => console.log('clicked'), { signal: controller.signal });

// ...later
controller.abort(); // automatically removes the handler
```

It works with any functions (even anonymous ones),
because `AbortController` manages their lifecycle itself.

## 5. Why this matters

If you do not remove old handlers:

- they can **run several times** on each click,
- they take up **memory** (leaks),
- they cause **unpredictable behavior** when components re-render (in React, for example).

## Summary

| Scenario | Can it be removed? | Solution |
| --- | --- | --- |
| Anonymous function | No | Use a named function or save it in a variable |
| Named function | Yes | Pass the same reference |
| Many listeners | Yes | Use `AbortController` |
| Dynamic removal | Yes | Store functions in a Map/object |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts344 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.