LESSON 27

Events

Learning objective: Respond to user actions with event listeners.

Understand

Events let your page react to the user.

Use addEventListener to run a function when something happens, like a click. The function is called a handler. Events are how interactive pages come alive.

Analogy: An event listener is like a doorbell: when pressed (the event), it triggers a response.

See It in Action

Handling a click:

const btn = document.querySelector("#go");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});
How it works: When the button is clicked, the arrow function runs and logs a message — that function is the event handler.

Try It Yourself

  1. Add a click listener to a button.
  2. Log a message when it fires.
  3. Change some content inside the handler.

Quick Quiz

What does addEventListener do?

Challenge

Make a button change a heading's text when clicked.

Success condition: Clicking your button updates the page.