addEventListener: click and the event object

The event-listener pattern

button.addEventListener("click", (event) => {
  console.log("clicked", event.target);
});

Three parts:

1. The event name — "click", "input", "submit", "keydown", etc.
2. The handler — your callback. Gets an event argument.
3. event.target — the element that triggered the event. Useful in delegation (C2-08).

Why addEventListener beats onclick

button.onclick = first;
button.onclick = second;          // first is OVERWRITTEN

button.addEventListener("click", first);
button.addEventListener("click", second);   // BOTH run

onclick = clobbers any previous handler. addEventListener stacks. The latter is the only sane choice in any non-trivial codebase.

removeEventListener — pass the same function

const handler = () => { /* ... */ };
button.addEventListener("click", handler);
button.removeEventListener("click", handler);   // works

If you wrote addEventListener("click", () => { ... }) with an inline arrow, you CAN'T remove it later — there's no reference. Name your handler if you'll need to remove it.