JavaScript addEventListener

Written by Swapnil RajaPublished 24 Aug 2026

addEventListener attaches 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

javascript

document.body.innerHTML = '<button id="btn">Go</button>';

document.getElementById("btn").addEventListener("click", function () {
  console.log("clicked");
});

document.getElementById("btn").click();

PreviousJavaScript Events NextJavaScript Event Object

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);

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);

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);

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);

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);

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>

JavaScript addEventListener

Example

The Three Arguments

Syntax

Running Only Once

Example

Attaching to Many Elements

Example

Named Handlers Can Be Reused

Example

The Same Handler Twice

Example

Two Anonymous Functions Are Not the Same

Example

Complete Example

Try It Yourself

Important Points

Conclusion