Events and Event Listeners

Events are signals that something has happened in the browser — a user clicked a button, typed in a field, scrolled the page, or submitted a form. Event listeners let your JavaScript code respond to these signals and make web pages interactive.

---

What Is an Event?

An event is an object that represents an action or occurrence. Common event types include:

Category	Events
Mouse	click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
Keyboard	keydown, keyup, keypress (deprecated)
Form	submit, change, input, focus, blur
Window	load, resize, scroll, beforeunload
Touch	touchstart, touchmove, touchend
Drag	drag, dragstart, dragend, drop

---

Adding Event Listeners

The recommended way to listen for events is addEventListener:

const button = document.querySelector("#myButton");

button.addEventListener("click", function() {
  console.log("Button was clicked!");
});

With an Arrow Function

button.addEventListener("click", () => {
  console.log("Clicked with arrow function!");
});

With a Named Function

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

button.addEventListener("click", handleClick);

Why named functions? You can remove the listener later — button.removeEventListener("click", handleClick).

---

The Event Object

Every event handler receives an event object with information about the event:

button.addEventListener("click", (event) => {
  console.log("Type:", event.type);         // "click"
  console.log("Target:", event.target);     // the element that was clicked
  console.log("X:", event.clientX);         // mouse X coordinate
  console.log("Y:", event.clientY);         // mouse Y coordinate
});

Commonly Used Event Properties

Property	Description
event.type	The event type (e.g., "click", "keydown")
event.target	The element that triggered the event
event.currentTarget	The element the listener is attached to
event.preventDefault()	Prevent the default browser action
event.stopPropagation()	Stop the event from bubbling up
event.key	The key pressed (for keyboard events)
event.clientX / event.clientY	Mouse position relative to the viewport

---

Preventing Default Behaviour

Some elements have default actions (e.g., links navigate, forms submit and reload the page). Use preventDefault() to stop them:

// Prevent a form from submitting and reloading the page
const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Form submitted without page reload!");
  // Handle form data here
});

// Prevent a link from navigating
const link = document.querySelector("a");
link.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Link click intercepted");
});

---

Event Bubbling and Capturing

When an event occurs on a nested element, it bubbles up through the DOM tree:

<div id="outer">
  <div id="inner">
    <button id="btn">Click me</button>
  </div>
</div>

document.getElementById("outer").addEventListener("click", () => {
  console.log("Outer clicked");
});