Sign in Get started

JavaScript Tutorial · JavaScript in the Browser · Lesson 42 of 44

JavaScript Events

Respond to clicks, input and keyboard events with addEventListener.

addEventListener

Events are things that happen on the page: clicks, key presses, form input, page load. Register a function to run when an event fires:

Click and input eventsTry it yourself
<button id="btn">Click me</button>
<p id="out">Not clicked yet.</p>
<input id="name" placeholder="Type your name">
<p id="greeting"></p>
<script>
  let clicks = 0;
  document.getElementById("btn").addEventListener("click", () => {
    clicks++;
    document.getElementById("out").textContent = `Clicked ${clicks} time(s).`;
  });
  document.getElementById("name").addEventListener("input", (event) => {
    document.getElementById("greeting").textContent = `Hello, ${event.target.value || "stranger"}!`;
  });
</script>

Avoid inline onclick="..." attributes — addEventListener keeps JavaScript out of the HTML and allows several listeners.

The event object

The listener receives an event object with details: event.target (the element), event.key for keyboard events, and event.preventDefault() to stop the default browser action (like following a link or submitting a form).

Event delegation

Events bubble up from the target through its ancestors. Instead of a listener on every list item, put one on the parent and check event.target — it also works for items added later:

Event delegationTry it yourself
<ul id="todo">
  <li>Learn the DOM <button>Done</button></li>
  <li>Learn events <button>Done</button></li>
</ul>
<button id="add">Add task</button>
<script>
  const todo = document.getElementById("todo");
  todo.addEventListener("click", (event) => {
    if (event.target.matches("button")) {
      event.target.closest("li").style.textDecoration = "line-through";
    }
  });
  let n = 0;
  document.getElementById("add").addEventListener("click", () => {
    todo.insertAdjacentHTML("beforeend", `<li>New task ${++n} <button>Done</button></li>`);
  });
</script>

Test yourself

Which method stops a form from submitting normally?

  1. event.stop()
  2. event.preventDefault()
  3. return true
  4. event.cancelSubmit()
Show answer

Answer: event.preventDefault()