JavaScript Simplified · One concept, one day, one project · Day 17 of 32

JavaScript Events

Making the page react to what the user does: clicks, hovers and typing. You build a button that changes the page when it is clicked.

By the end of today you can

Explain what an event is
Name the common events: click, mouseover, input, change
React to a click with addEventListener
Build an interactive button

Your pages change, but only on their own, when they load. A real app waits for the user: it reacts when you click, type or hover. That moment of "something happened" is an event, and reacting to events is the layer that makes a page feel alive.

1. What an Event Is

Definition

An event is something that happens on the page that your code can react to: a click, a key press, the mouse moving over something, the text in a box changing. JavaScript lets you run code the moment an event happens.

Event	Happens when
click	the user clicks an element
mouseover	the mouse moves onto an element
input	the text in a box changes as they type
change	a field loses focus after its value changed

2. Reacting to a Click

You react to an event with addEventListener. You give it the event name and a function to run when it happens. That function is called the handler.

What this code doesClicking the button changes the message.

index.html

1
2

<button id="btn">Click me</button>
<p id="msg">Not clicked yet.</p>

app.js

const btn = document.getElementById("btn");
const msg = document.getElementById("msg");

// run this function when the button is clicked
btn.addEventListener("click", function () {
  msg.textContent = "You clicked the button!";
});

BROWSERindex.html  ·  after clicking the button

The message started as "Not clicked yet." The picture shows the page after a click: the handler ran and changed the text. Without the click, nothing happens, which is the whole point.

Today’s Mini Project

🔘 Interactive Button

A button that does two things when clicked: changes the text on the page and changes its own look. This is the heartbeat of every interactive page.

What this code doesOne click changes the message and the button’s colour.

index.html

1
2

<button id="go">Turn on</button>
<p id="state">The light is off.</p>

style.css

#go{padding:10px 18px;font-size:15px;cursor:pointer}

app.js

const go = document.getElementById("go");
const state = document.getElementById("state");

go.addEventListener("click", function () {
  state.textContent = "The light is on.";
  go.style.backgroundColor = "#0a6e6e";
  go.style.color = "white";
});

BROWSERindex.html  ·  after one click

Everything comes together here: selecting elements (Day 13), changing text (Day 14) and styles (Day 15), now triggered by a user action instead of on load.

Challenge (15 minutes)

Add a mouseover listener to the button that changes the message to "Click me now!" when the mouse moves onto it. Expected: hovering changes the text, clicking changes it again.

Try This

Add a button that, when clicked, changes the page’s h1 to your name.

Expected: nothing happens until you click, then the heading becomes your name.

Picture This

The page now waits for you. That shift, from "runs once on load" to "reacts whenever the user does something", is what separates a document from an application.

Checkpoint

What is an event?

Something that happens on the page that your code can react to, such as a click, a hover, or typing. JavaScript can run code the moment an event happens.

What does addEventListener need?

The name of the event (like "click") and a function to run when it happens. That function is the handler.

Why does nothing happen until the user acts?

Because the handler only runs when its event fires. Before the click, the code is just waiting; the click is what triggers it.

Tick Before You Move On

☐ I can explain what an event is
☐ I can name common events: click, mouseover, input, change
☐ I can react to a click with addEventListener
☐ I built the Interactive Button

Quick Recap

An event is something the user does that your code can react to. Common events: click, mouseover, input, change. addEventListener runs a handler function when its event happens. Events turn a static page into an interactive one.

Next: Day 18. You used addEventListener once. Tomorrow you lean on it properly and build a counter that goes up and down.