JavaScript Events and Event Listeners

Events are actions or occurrences that happen in the browser — a user clicking a button, typing in a field, hovering over an image, or the page finishing loading. JavaScript can listen for these events and execute code in response, making web pages interactive.

What is an Event?

An event is any interaction between the user and the webpage, or between the browser and the document. Common examples include:

• Mouse click, double-click, hover
• Keyboard key press or release
• Form submission or input change
• Page load, scroll, resize
• Focus gaining or losing on an element

Three Ways to Handle Events

Method 1: Inline Event Handler (HTML attribute)

<button onclick="alert('Button clicked!')">Click Me</button>

This works but is not recommended for real projects as it mixes HTML and JavaScript.

Method 2: DOM Property Assignment

<button id="btn">Click Me</button>

<script>
  let btn = document.getElementById("btn");
  btn.onclick = function() {
    console.log("Button was clicked!");
  };
</script>

Method 3: addEventListener() — Recommended Approach

let btn = document.getElementById("btn");

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

addEventListener is preferred because:

• Multiple listeners can be added to the same event
• Listeners can be removed with removeEventListener
• Keeps JavaScript separate from HTML

Common Mouse Events

let box = document.getElementById("box");

box.addEventListener("mouseenter", () => {
  box.style.backgroundColor = "lightblue";
});

box.addEventListener("mouseleave", () => {
  box.style.backgroundColor = "";
});

Keyboard Events

document.addEventListener("keydown", function(event) {
  console.log("Key pressed:", event.key);
  console.log("Key code:", event.code);
});

// Detect specific key
document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("Enter key was pressed!");
  }
});

Form Events

let nameInput = document.getElementById("name");

// Real-time character count
nameInput.addEventListener("input", function() {
  console.log("Current value:", this.value);
  console.log("Characters:", this.value.length);
});

// Form submit
let form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();  // Stop page from refreshing
  console.log("Form submitted!");
});

The Event Object

Every event handler automatically receives an event object that contains information about the event that occurred.

document.addEventListener("click", function(event) {
  console.log("Event type:", event.type);       // click
  console.log("Target element:", event.target); // The clicked element
  console.log("Mouse X:", event.clientX);       // Horizontal position
  console.log("Mouse Y:", event.clientY);       // Vertical position
});

event.target — The Element That Was Clicked

document.addEventListener("click", function(event) {
  console.log("You clicked on:", event.target.tagName);
  event.target.style.color = "red";  // Change the clicked element's color
});

Preventing Default Behavior

event.preventDefault() stops the browser's default action for an event.

// Prevent a link from navigating
let link = document.querySelector("a");
link.addEventListener("click", function(event) {
  event.preventDefault();
  console.log("Link click prevented!");
});

// Prevent form submission (for validation)
let form = document.getElementById("loginForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  let username = document.getElementById("username").value;
  if (username.trim() === "") {
    alert("Username cannot be empty!");
  } else {
    console.log("Form data is valid. Submitting...");
  }
});

Stopping Event Propagation

Events in the DOM "bubble up" — they fire on the target element and then on each parent element up to the document. event.stopPropagation() stops this bubbling.

let child  = document.getElementById("child");
let parent = document.getElementById("parent");

child.addEventListener("click", function(event) {
  console.log("Child clicked");
  event.stopPropagation();  // Parent's click handler won't fire
});

parent.addEventListener("click", function() {
  console.log("Parent clicked");  // Won't fire if child is clicked
});

Event Delegation

Event delegation is a powerful technique where a single listener is attached to a parent element to handle events from all its children — including future children added dynamically.

<ul id="taskList">
  <li>Task 1</li>
  <li>Task 2</li>
</ul>

<script>
let list = document.getElementById("taskList");

// One listener handles clicks on ALL list items
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.style.textDecoration = "line-through";  // Mark done
    console.log("Task completed:", event.target.textContent);
  }
});
</script>

Removing Event Listeners

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

let btn = document.getElementById("btn");
btn.addEventListener("click", handleClick);

// Later, remove the listener (must use same function reference)
btn.removeEventListener("click", handleClick);

Practical Example — Real-Time Input Validator

<input type="text" id="emailInput" placeholder="Enter email" />
<p id="feedback"></p>

<script>
let input    = document.getElementById("emailInput");
let feedback = document.getElementById("feedback");

input.addEventListener("input", function() {
  let value = this.value;
  if (value.includes("@") && value.includes(".")) {
    feedback.textContent = "Valid email format";
    feedback.style.color = "green";
  } else {
    feedback.textContent = "Please enter a valid email";
    feedback.style.color = "red";
  }
});
</script>

Key Points to Remember

• Events are user or browser actions that JavaScript can respond to
• Always use addEventListener() — it is the most flexible and recommended approach
• The event object provides details like event.target, event.key, and event.clientX/Y
• Use event.preventDefault() to stop default browser behavior (e.g., form submission, link navigation)
• Use event.stopPropagation() to prevent the event from bubbling up to parent elements
• Event delegation attaches one listener to a parent to handle events on all children — including dynamic ones
• To remove a listener, the exact same function reference must be used