JavaScript Events

An event is something that happens on a page: a click, a mouse moving over a button, a key pressed, a form submitted, a page finishing loading. JavaScript's whole job is to listen for events and answer them. Without events, a page is a poster — you can only look at it. With events, it becomes a conversation: the user does something, JavaScript answers.

Diagram — see how it fits together

Every event has a name and a place where it happens. A click on a button is a click event on that button. Moving the mouse over a picture is a mouseover event on that picture. Your code says: "when this event happens on this element, run this function."

Handling events with HTML attributes

The simplest way is to write the handler straight into the HTML, with an attribute like onclick. The value is the JavaScript to run when the event fires.

<button onclick="sayHello()">Say Hello</button>

This works and is easy to read, which is why you will see it in many examples — including this course. But it mixes JavaScript into your HTML, and each element can only have one handler per event this way.

addEventListener — the better way

The professional way is addEventListener. You keep your HTML clean and attach the handler from your script instead. You can attach several handlers to the same event, and you can remove one later with removeEventListener.

let btn = document.getElementById("orderBtn");
btn.addEventListener("click", function() {
  alert("Your chai is on its way!");
});

Notice there is no "on" in the event name here — it is "click", not "onclick". The function you pass is called the event handler or listener, and it runs every time the event fires.

Common events to know

• click — the user clicks an element. The most used event of all.
• mouseover / mouseout — the mouse enters or leaves an element. Good for hover effects.
• keydown / keyup — a key is pressed or released. Good for live search and games.
• submit — a form is submitted. Good for checking the form before it is sent.
• load — the page has finished loading. Good for code that must wait for the whole page.

Common mistakes

• Attaching a listener before the element exists — the script runs before the HTML is read, so getElementById finds nothing.
• Writing addEventListener("onclick", ...) — the event name is "click", without the "on".
• Calling the handler while attaching it — addEventListener("click", sayHello()) runs it immediately; write sayHello without brackets to pass the function itself.
• Forgetting that one element can have many listeners — with addEventListener they all run, in the order they were added.

Remember

• An event is something that happens: click, hover, keypress, submit, load.
• onclick="..." in HTML is the simple way; addEventListener("click", ...) is the professional way.
• The handler receives an event object — event.target is the element that was clicked.
• The user does something, JavaScript answers — every click is a conversation.

Example explained

• onclick="orderChai()" — the simple way: the button's HTML carries its own handler, which runs orderChai() on click.
• document.getElementById("surpriseBtn").addEventListener("click", ...) — the professional way: the script finds the button and attaches a handler to it, keeping the HTML clean.
• onmouseover="this.style.backgroundColor='orange'" — a hover event that changes the box's colour while the mouse is over it.
• onmouseout="this.style.backgroundColor='white'" — the matching event that changes the colour back when the mouse leaves.
• document.getElementById("msg").innerHTML = ... — every handler writes its message into the same paragraph, so the visitor sees what just happened.