JavaScript Events

Events are actions or occurrences that happen in the browser — a user clicks a button, a page finishes loading, an input value changes. JavaScript can detect these events and execute code in response, making web pages interactive.

What Are Events?

An event is a signal that something has happened. Common sources include user interaction (clicks, key presses, mouse movement), browser actions (page load, resize, scroll), and programmatic triggers. JavaScript responds to events through event handlers — functions that run when an event fires.

Inline Event Handler (HTML attribute)

// In HTML: <button onclick="handleClick()">Click Me</button>

function handleClick() {
  console.log("Button was clicked!");
}

// Calling it directly to demonstrate:
handleClick(); // Button was clicked!

Common HTML Events

Event	Fires When
click	An element is clicked
dblclick	An element is double-clicked
mouseover	The mouse moves over an element
mouseout	The mouse moves off an element
keydown	A key is pressed
keyup	A key is released
change	An input value changes (and loses focus)
input	An input value changes (immediately)
submit	A form is submitted
load	The page or resource finishes loading
resize	The browser window is resized
scroll	The page is scrolled

Event Handler Properties

You can assign a function to an element's on-event property in JavaScript. This is cleaner than inline HTML attributes but only supports one handler per event per element.

Using on-event Properties

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

btn.onclick = function () {
  console.log("Clicked via onclick property");
};

btn.onmouseover = function () {
  console.log("Mouse is over the button");
};

// Simulate events for demo
btn.onclick();     // Clicked via onclick property
btn.onmouseover(); // Mouse is over the button

addEventListener()

The modern and recommended approach. addEventListener() lets you attach multiple handlers to the same event and provides fine-grained options like capture phase listening.

addEventListener Basics

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

function greet() {
  console.log("Hello from addEventListener!");
}

function highlight() {
  console.log("Button highlighted!");
}

// Attach two handlers to the same event
btn.addEventListener("click", greet);
btn.addEventListener("click", highlight);

// Both handlers run when the button is clicked
// Output:
// Hello from addEventListener!
// Button highlighted!

The Event Object

When an event fires, the browser passes an event object to the handler. This object contains details about the event such as which element triggered it and what type of event occurred.

Using the Event Object

document.getElementById("myBtn").addEventListener("click", function (event) {
  console.log("Type:", event.type);           // click
  console.log("Target:", event.target.id);     // myBtn
  console.log("Tag:", event.target.tagName);   // BUTTON
  console.log("Timestamp:", event.timeStamp);  // ms since page load
});

removeEventListener()

To detach a handler, call removeEventListener with the same event type and the same function reference. Anonymous functions cannot be removed because there is no reference to pass.

Removing a Listener

function logClick() {
  console.log("Clicked!");
}

const btn = document.getElementById("myBtn");
btn.addEventListener("click", logClick);

// Later, remove the handler
btn.removeEventListener("click", logClick);
console.log("Listener removed — clicks will no longer log");

📝 Note: Always prefer addEventListener() over inline handlers or on-event properties. It supports multiple listeners, provides options for capture/bubble phase, and keeps JavaScript separate from HTML.

Exercise:

Which property of the event object tells you which element triggered the event?

event.typeevent.targetevent.listenerevent.source

❮ JS DOM Animations JS Event Listener ❯