The JavaScript addEventListener() method
The addEventListener() method runs a function whenever a named event fires on an element. button.addEventListener("click", handler) calls handler on every click. It's the standard, flexible way to handle events — you can add many listeners to one element, and remove them later with removeEventListener().
Overview
addEventListener() is how JavaScript reacts to things happening on the page — clicks, key presses, form input, scrolling. You give it the event name (as a string, with no "on" prefix) and a function to run when that event fires. el.addEventListener("click", () => { ... }) is the bread and butter of interactivity.
Its big advantage over old inline onclick attributes and the el.onclick = property is that you can attach multiple listeners for the same event without them overwriting each other, and keep your JavaScript out of your HTML. Your handler automatically receives an event object as its first argument, carrying useful details — event.target (the element), event.key (for keyboard events), and event.preventDefault() to stop the default behavior.
A third argument sets options: { once: true } auto-removes the listener after it fires once, and { passive: true } can improve scroll performance. To detach a listener later, call removeEventListener() with the same function reference — which means you can't remove an anonymous inline function, so name handlers you intend to remove.
Syntax
element.addEventListener(type, listener)
element.addEventListener(type, listener, options)
button.addEventListener("click", (event) => {
console.log("clicked", event.target);
});Parameters
The addEventListener() method accepts the following parameters.
| Parameter | Description |
|---|---|
type |
The event name as a string, with no "on" prefix — e.g. "click", "input", "keydown". |
listener |
The function to run when the event fires. It receives the event object as its first argument. |
options |
Optional. A boolean (capture) or an options object such as { once: true, passive: true }. |
Example
<button id="btn" style="font:15px system-ui;padding:8px 16px">Click me</button>
<p id="count">Clicks: 0</p>
<script>
let clicks = 0;
const out = document.getElementById('count');
document.getElementById('btn').addEventListener('click', () => {
clicks++;
out.textContent = 'Clicks: ' + clicks;
});
</script>Best practices
- Prefer
addEventListener()over inlineonclickattributes — it allows multiple handlers and keeps JS out of HTML. - Use the event object —
event.target,event.preventDefault()— instead of global state. - Pass
{ once: true }for one-time handlers so you don't have to remove them manually. - To remove a listener, keep a named function reference — anonymous functions can't be removed.
Frequently asked questions
How do I add a click event in JavaScript?
element.addEventListener("click", handler). The handler runs on every click and receives the event object.What is the difference between addEventListener() and onclick?
addEventListener() lets you attach multiple handlers for the same event and supports options; setting el.onclick allows only one handler, which the next assignment overwrites.How do I remove an event listener?
removeEventListener(type, handler) with the same function reference you added. This is why you should use a named function if you plan to remove it.