EventTarget.addEventListener(type, listener) registers a function (or handleEvent object) that runs when that event type is delivered to the target. Per MDN, it is the recommended way to listen for events — returns undefined.
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call target.addEventListener. Start with this line.
target.addEventListener(type, listener, options?)| Call | What it does |
|---|---|
target.addEventListener(type, listener, options?) | Primary signature. |
target.addEventListener(...) | Call with the arguments your case needs. |
Built into the browser. Call addEventListener(...) on an EventTarget (or Element, Document, Window, …) — no import required.
target.addEventListener(type, listener, options?)| Parameter | Description |
|---|---|
| type | Required. Event name string (e.g. "click") |
| listener | Required. Function or { handleEvent } object |
| options / useCapture | Optional. once, capture, passive, signal |
| Return Value | Description |
|---|---|
| * | Always undefined |
addEventListener()Register a click listener on a button.
const button = document.querySelector("#demoBtn");
button.addEventListener("click", function () {
console.log("Button clicked!");
});EventTarget — here a button."click" is case-sensitive.addEventListener returns undefined.Attach more than one handler for the same event type.
const button = document.querySelector("#demoBtn");
button.addEventListener("click", () => console.log("first"));
button.addEventListener("click", () => console.log("second"));
// Click → logs both (unlike a single onclick property)"click".onclick = …, you can stack handlers.{ once: true }Run the listener at most once, then remove it automatically.
const button = document.querySelector("#demoBtn");
let count = 0;
button.addEventListener("click", function () {
count++;
console.log("once fired, count=" + count);
}, { once: true });
// Second click does nothing{ once: true }.this BindingIn a regular function listener, this is the target element.
const button = document.querySelector("#demoBtn");
button.addEventListener("click", function (e) {
console.log(this.id); // "demoBtn"
console.log(e.currentTarget === this); // true
});
// Arrow functions do NOT bind this to the elementthis.this. It equals the element that owns the listener.currentTarget. MDN: e.currentTarget === this.e.currentTarget. Clearer when you also use arrows or bound methods.AbortSignalPass { signal }, then abort() to drop the listener.
const button = document.querySelector("#demoBtn");
const controller = new AbortController();
button.addEventListener("click", () => {
console.log("still listening…");
}, { signal: controller.signal });
// Later:
controller.abort(); // listener is removednew AbortController() owns a signal.{ signal: controller.signal }.controller.abort() removes the listener.EventTarget.addEventListener() is marked Baseline Widely available on MDN (since July 2015). It is a browser Web API (also available in Web Workers). Some options such as signal have varying support in older browsers.
Supported across modern Chrome, Firefox, Safari, and Edge for registering event listeners.
Bottom line: Safe for production. Prefer addEventListener over onXYZ properties; use removeEventListener or AbortSignal for cleanup.
Fire events on any EventTarget, including custom ones.
12 people found this page helpful