Workshop: alert button with event handler

Theoretical recap.

An event is a signal the browser emits when something happens.

A click, a key press, a page load.

In JavaScript, you react to events by attaching an event handler, a function that runs when the event fires.

The standard modern approach uses addEventListener.

Element.addEventListener click, handler function.

Here, click is the event type and handler function is the code that executes.

Mental model.

Think of the DOAM element as a person who can listen for a specific noise.

You tell them, when you hear a click, do this.

The listener stays active until you remove it.

The alert function opens a blocking dialog box displaying a message, useful for quick feedback and debugging.

Common mistakes, calling the function immediately by writing addEventListenerClick handler with parentheses instead of passing the reference handler.

Forgetting to select the element correctly with document.getElementById or querySelector, running the script before the DOM is loaded so the element is null, and confusing the string event type, click, with a variable.

Mini example.

const btn equals document.getElementById my btn.

btn.addEventListenerClick function.

Alert button clicked.

Semicolon.

This wires a button so that each click shows an alert.

You now have every ingredient needed to build the workshop below.

Select an element, attach a listener, and trigger a reaction.