Suggest an edit

Improve this article

Refine the answer for “What do addEventListener() and removeEventListener() do?”. 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)

## `addEventListener()`

### Purpose

Adds a handler (a function) that will be called when a specific event occurs.

### Syntax:

```javascript
element.addEventListener(type, listener, options);
```

| Argument | What it means |
| --- | --- |
| `type` | a string, the event name (`'click'`, `'input'`, `'keydown'`, etc.) |
| `listener` | the function that runs when the event fires |
| `options` *(optional)* | an object with additional settings (for example `{ once: true }`) |

### Example:

```javascript
<button id="btn">Click me</button>
```

```javascript
const btn = document.querySelector('#btn');

btn.addEventListener('click', () => {
  alert('Button clicked!');
});
```

Now this handler will be called on every click on the button.

### Example with the `event` object:

```javascript
btn.addEventListener('click', (event) => {
  console.log(event.type);   // "click"
  console.log(event.target); // the element that was clicked
});
```

### Useful options:

```javascript
btn.addEventListener('click', handler, {
  once: true,      // the handler fires only once
  capture: false,  // listen during the bubbling phase (default)
  passive: true,   // tells the browser preventDefault will not be called
});
```

## `removeEventListener()`

### Purpose

Removes a previously added event handler.
Used when you need to turn off the reaction to an event.

### Syntax:

```javascript
element.removeEventListener(type, listener, options);
```

> Important:
> To remove a handler, you must pass **the same function**
> you passed to `addEventListener`.

### Incorrect:

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

This creates **two different anonymous functions**, and the browser has no way to know which one to remove.

### Correct:

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

btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);
```

Now the removal works.

## A real-world example

```javascript
function handleScroll() {
  console.log('Scrolling!');
}

// Start listening
window.addEventListener('scroll', handleScroll);

// Stop listening after 3 seconds
setTimeout(() => {
  window.removeEventListener('scroll', handleScroll);
  console.log('Listener removed!');
}, 3000);
```

## Summary

| Method | What it does | Notes |
| --- | --- | --- |
| `addEventListener()` | Adds an event handler | You can attach several listeners to one event |
| `removeEventListener()` | Removes a handler | Only works with the same function object |
| `options` | Settings | `{ once, capture, passive }` control the listener's behavior |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.