JavaScript EventTarget addEventListener() Method

What You’ll Learn

addEventListener() is the standard way to register event handlers on any EventTarget — buttons, document, window, or new EventTarget(). Learn multiple listeners, options like once and signal, how this works, five examples, and try-it labs.

Introduction

When a user clicks a button, types in a field, or your code dispatches a custom event, something needs to listen. addEventListener() is that registration step.

It is preferred over element.onclick = ... because you can attach many handlers, control capturing vs bubbling, and use modern options such as once, passive, and signal.

This page is part of EventTarget. Related topics include Window (also an EventTarget).

Understanding the addEventListener() Method

You pass an event type (case-sensitive string) and a listener (a function, or an object with handleEvent()). The browser calls that listener when the event is delivered to the target.

• Works on elements, document, window, and custom EventTargets.
• Same listener object is not registered twice for the same type.
• Adding a listener during an event does not run it for that same delivery.
• Return value is always undefined.

📝 Syntax

General forms of EventTarget.addEventListener:

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

Parameters

• type — case-sensitive event name ("click", "keydown", "valuechange", …).
• listener — a function, null, or an object with handleEvent(event).
• options (optional) — object with capture, once, passive, and/or signal.
• useCapture (optional) — legacy boolean; same idea as { capture: true }.

Return value

None (undefined).

Common options

Common patterns

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

button.addEventListener("click", handler, { once: true });

const controller = new AbortController();
button.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

// Custom EventTarget (no DOM required):
const bus = new EventTarget();
bus.addEventListener("ping", (e) => console.log(e.type));
bus.dispatchEvent(new Event("ping"));

Examples Gallery

Examples follow MDN EventTarget.addEventListener() patterns. Use View Output or Try It Yourself for each case.

const button = document.querySelector("#demoBtn");
const out = document.querySelector("#out");

button.addEventListener("click", () => {
  out.textContent = "Button clicked!";
});

Button clicked!
(after you click the button in Try It)

const button = document.querySelector("#demoBtn");
const out = document.querySelector("#out");
const lines = [];

button.addEventListener("click", () => lines.push("first"));
button.addEventListener("click", () => lines.push("second"));

button.addEventListener("click", () => {
  out.textContent = lines.join("\n");
  lines.length = 0;
});

first
second
(after one click in Try It)

const button = document.querySelector("#demoBtn");
const out = document.querySelector("#out");
let count = 0;

button.addEventListener(
  "click",
  () => {
    count++;
    out.textContent = "once fired, count=" + count;
  },
  { once: true }
);

once fired, count=1
(further clicks do nothing)

const button = document.querySelector("#demoBtn");
const out = document.querySelector("#out");

button.addEventListener("click", function (e) {
  out.textContent = [
    "this.id=" + this.id,
    "currentTarget===this: " + (e.currentTarget === this)
  ].join("\n");
});

this.id=demoBtn
currentTarget===this: true

const button = document.querySelector("#demoBtn");
const stop = document.querySelector("#stopBtn");
const out = document.querySelector("#out");
const controller = new AbortController();

button.addEventListener(
  "click",
  () => {
    out.textContent = "still listening…";
  },
  { signal: controller.signal }
);

stop.addEventListener("click", () => {
  controller.abort();
  out.textContent = "listener aborted";
});

still listening…
listener aborted
(after Stop in Try It, clicks no longer update)

🚀 Common Use Cases

• UI interactions — click, input, submit, keydown on page controls.
• Multiple modules — each library adds its own listener safely.
• One-shot flows — { once: true } for first-run tips.
• Cleanup — AbortSignal when a view unmounts.
• Custom emitters — listen on new EventTarget() without DOM.
• Scroll / touch performance — consider { passive: true } when you will not call preventDefault().

📝 Notes

• Event type strings are case-sensitive ("click" not "Click").
• Store function references when you need removeEventListener.
• Arrow listeners do not set this to the element — use event.currentTarget.
• Prefer addEventListener over assigning onclick in real apps.
• Available in Web Workers (per MDN).
• Start from EventTarget() when building non-DOM emitters.

💡 Best Practices