JavaScript Events
JavaScript addEventListener
addEventListenerattaches a handler to an element and can control how it runs.
It takes an event name, a handler, and an optional set of options.
The same element can have as many listeners as you like.
Example
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
document.getElementById("btn").addEventListener("click", function () {
console.log("clicked");
});
document.getElementById("btn").click();The output is clicked.
The Three Arguments
The first is the event name, such as click.
The second is the handler function.
The third is optional: either a boolean or an options object.
Syntax
Syntax
javascript
element.addEventListener("click", handler, { once: true });The options object is the clearer of the two forms.
Running Only Once
once removes the listener automatically after it fires.
Example
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
const btn = document.getElementById("btn");
let count = 0;
btn.addEventListener("click", function () {
count = count + 1;
}, { once: true });
btn.click();
btn.click();
console.log(count);The output is 1, even though it was clicked twice.
Attaching to Many Elements
A listener goes on one element, so a list needs a loop.
Event delegation, later in this section, avoids the loop entirely.
Example
Example
javascript
document.body.innerHTML =
'<button class="b">A</button><button class="b">B</button>';
let clicks = 0;
document.querySelectorAll(".b").forEach(function (button) {
button.addEventListener("click", function () {
clicks = clicks + 1;
});
});
document.querySelectorAll(".b").forEach(function (b) { b.click(); });
console.log(clicks);Both buttons now have their own listener.
Named Handlers Can Be Reused
One function can be attached to several elements.
Example
Example
javascript
document.body.innerHTML =
'<button id="a">A</button><button id="b">B</button>';
let total = 0;
function count() {
total = total + 1;
}
document.getElementById("a").addEventListener("click", count);
document.getElementById("b").addEventListener("click", count);
document.getElementById("a").click();
document.getElementById("b").click();
console.log(total);A named handler is also the only kind you can remove later.
The Same Handler Twice
Adding the identical function for the same event twice has no extra effect.
Example
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
const btn = document.getElementById("btn");
let count = 0;
function bump() {
count = count + 1;
}
btn.addEventListener("click", bump);
btn.addEventListener("click", bump);
btn.click();
console.log(count);The output is 1, because the duplicate was ignored.
Two Anonymous Functions Are Not the Same
Each function expression creates a new function.
So two identical-looking handlers both get added.
Example
Example
javascript
document.body.innerHTML = '<button id="btn">Go</button>';
const btn = document.getElementById("btn");
let count = 0;
btn.addEventListener("click", function () { count = count + 1; });
btn.addEventListener("click", function () { count = count + 1; });
btn.click();
console.log(count);The output is 2, which is the same reason they cannot be removed later.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript addEventListener</title>
</head>
<body>
<h1>addEventListener</h1>
<button id="once">Works once</button>
<button id="always">Works every time</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
let count = 0;
document.getElementById("once").addEventListener("click", function () {
out.textContent = "This only ever fires once";
}, { once: true });
document.getElementById("always").addEventListener("click", function () {
count = count + 1;
out.textContent = "Clicked " + count + " times";
});
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try removing once:
Delete { once: true } and click the first button twice.
Important Points
addEventListenertakes a name, a handler, and options.{ once: true }removes the listener after it fires.- Each element needs its own listener, so lists need a loop.
- Adding the same named function twice has no extra effect.
- Two identical-looking anonymous functions are two different functions.
Conclusion
addEventListener is the workhorse of interactive JavaScript.
The options object covers most of the behaviour you will want to change.
Named handlers matter as soon as you need to remove one.