JavaScript Event Listener

Listen instead of overwriting

An event is something that happened: a click, a key, a form submit, the document finishing load. A listener is a function that runs when that event fires on a node.

element.onclick = handler stores one function. A second assignment replaces the first. addEventListener adds. Two libraries — or your own two functions — can share the same button.

addEventListener

The first argument is the event name as a string, without on. The second is the function. The handler receives an event object if you declare a parameter.

<button id="go">Add one</button>
<p id="out">0</p>
<script>
  const go = document.getElementById("go");
  const out = document.getElementById("out");

  go.addEventListener("click", function () {
    const n = Number(out.textContent) + 1;
    out.textContent = String(n);
  });
</script>

More than one listener

Each call to addEventListener attaches another function. They run in the order you added them. Neither replaces the other.

<button id="go">Save</button>
<p id="out"></p>
<script>
  const go = document.getElementById("go");
  const out = document.getElementById("out");
  const notes = [];

  go.addEventListener("click", function () {
    notes.push("saved");
    out.textContent = notes.join(", ");
  });

  go.addEventListener("click", function () {
    console.log("clicks so far: " + notes.length);
  });
</script>

The event object

The handler can take event (any name works). event.target is the node that was clicked. event.preventDefault() stops a form from submitting or a link from navigating. Call it when your script will handle the action itself.

<form id="box">
  <input id="title" value="Harbor notes">
  <button type="submit">Keep</button>
</form>
<p id="out"></p>
<script>
  const box = document.getElementById("box");
  const title = document.getElementById("title");
  const out = document.getElementById("out");

  box.addEventListener("submit", function (event) {
    event.preventDefault();
    out.textContent = "Kept: " + title.value;
  });
</script>

Other everyday events

<input id="name" placeholder="Name">
<p id="out"></p>
<script>
  const name = document.getElementById("name");
  const out = document.getElementById("out");

  name.addEventListener("input", function () {
    out.textContent = "Hello, " + name.value;
  });
</script>

removeEventListener

To remove a listener you must pass the same function you added. An inline anonymous function cannot be removed later because you no longer have a reference. Keep the handler in a const if you need to detach it.

You rarely need to remove listeners on a small page. You need it when you create and destroy panels, or when a one-shot handler should run only once — there is also{ once: true } as a third argument.

What to remember

• addEventListener("click", handler) is the modern attach.
• Several listeners can share one node. onclick keeps only one.
• event.preventDefault() stops the browser’s default action.
• Use named functions if you plan to remove the listener later.

Next: window — the tab itself, including timers.