Event Listeners in JavaScript: A Complete Guide

Event Listeners in JavaScript: A Complete Guide

addEventListener registers a callback (event handler) that runs when a DOM event occurs. It is the standard way to handle user interaction.

Basic Usage

const button = document.querySelector("button");
button.addEventListener("click", (event) => {
  console.log("clicked", event.target);
});
``
### The Event Object

The callback receives an `event` object with properties:

- `event.target`: the element that triggered the event.
- `event.currentTarget`: the element the listener is registered on.
- `event.type`: the event type ("click", "input", etc.).
- `event.preventDefault()`: prevents the default behavior.
- `event.stopPropagation()`: stops the event from bubbling.

### Multiple Listeners

```js
button.addEventListener("click", handler1);
button.addEventListener("click", handler2);
// both run on click (in registration order)
``
### Removing Listeners

```js
const handler = () => console.log("clicked");
button.addEventListener("click", handler);
// later:
button.removeEventListener("click", handler); // must be the same reference
``
Anonymous functions cannot be removed because you do not have a reference to them.

### Event Bubbling and Capturing

Events bubble from the target up to the document. You can listen in the capturing phase (downward) with the third argument:

```js
element.addEventListener("click", handler, true); // capturing phase
element.addEventListener("click", handler, false); // bubbling phase (default)
``
Stop bubbling with `event.stopPropagation()`.

### `this` in Event Handlers

- **Regular function**: `this` is the element (`event.currentTarget`).
- **Arrow function**: `this` is lexical (from the enclosing scope), not the element.

```js
button.addEventListener("click", function () {
  console.log(this); // the button
});
button.addEventListener("click", () => {
  console.log(this); // lexical this (not the button)
  console.log(event.currentTarget); // use this instead
});
``
### Event Delegation

Instead of adding a listener to each child, add one to the parent:

```js
document.querySelector("#list").addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("clicked", event.target.textContent);
  }
});
``
This works for dynamically added children too.

### Common Event Types

- Mouse: `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseenter`, `mouseleave`.
- Keyboard: `keydown`, `keyup`, `keypress` (deprecated).
- Form: `input`, `change`, `submit`, `focus`, `blur`.
- Window: `resize`, `scroll`, `load`, `DOMContentLoaded`.

### Memory and Cleanup

Always remove listeners when elements are removed (especially in SPAs):

```js
// React
useEffect(() => {
  const handler = () => { ... };
  window.addEventListener("resize", handler);
  return () => window.removeEventListener("resize", handler);
}, []);
``
### The Takeaway

`addEventListener` registers callbacks for DOM events. The callback receives an event object. Regular functions get `this` as the element; arrows get lexical `this` (use `event.currentTarget`). Use named functions for removable listeners. Use event delegation for dynamic children. Always clean up listeners to avoid memory leaks.