Events

What you'll learn

How to run code when the user clicks, types or submits, and how to read information from the event.

Why it matters

Pages are only interactive because code responds to events. Buttons, menus, games and forms all depend on them.

Explanation

An event is something that happens on the page. You attach an event listener, a function that runs when it happens:

The listener receives an event object with details:

• event.target is the element that triggered it.
• event.key is the key pressed, in keyboard events.
• event.preventDefault() stops the browser's default action, such as a form reloading the page.

Common events: click, input (every change in a text field), change, submit, keydown, mouseenter.

Event delegation: instead of adding a listener to every list item, add one to the parent and check event.target. It works even for items added later.

Example

Step-by-step walkthrough

1. The counter variable count lives outside the listener so it remembers its value between clicks.
2. Each click adds one and rewrites the button text.
3. The input listener fires on every keystroke. event.target.value is the current text, shown in the greeting.
4. One listener on the <ul> handles clicks on any <li>. We check event.target.tagName and strike the clicked item through.

Try it yourself

Click the button, type in the box and click list items in the preview. Then add a reset button that sets count back to 0.

EventsHTML / CSS

Editable code<button id="btn">Clicked 0 times</button> <input id="name" placeholder="Type your name"> <p id="greeting"></p> <script> let count = 0; const btn = document.querySelector("#btn"); btn.addEventListener("click", () => { count++; btn.textContent = "Clicked " + count + " times"; }); document.querySelector("#name").addEventListener("input", (event) => { document.querySelector("#greeting").textContent = "Hello, " + event.target.value; }); </script>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Calling the function instead of passing it: addEventListener("click", doIt()) runs it immediately. Write doIt or () => doIt().
• Attaching listeners to elements that do not exist yet.
• Forgetting preventDefault() on form submit, so the page reloads.
• Adding the same listener repeatedly inside a loop or another handler.

Quick quiz

Summary

• addEventListener(type, fn) runs code when something happens.
• The event object tells you what happened and where.
• Delegate to a parent for lists that change.

Next: code that waits, with async and await.

button.addEventListener("click", () => {
  console.log("clicked");
});

<button id="btn">Clicked 0 times</button>
<input id="name" placeholder="Type your name">
<p id="greeting"></p>
<ul id="list"><li>One</li><li>Two</li><li>Three</li></ul>

<script>
  let count = 0;
  const btn = document.querySelector("#btn");
  btn.addEventListener("click", () => {
    count++;
    btn.textContent = "Clicked " + count + " times";
  });

  document.querySelector("#name").addEventListener("input", (event) => {
    document.querySelector("#greeting").textContent = "Hello, " + event.target.value;
  });

  document.querySelector("#list").addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
      event.target.style.textDecoration = "line-through";
    }
  });
</script>