Lesson 6: Events & Event Listeners

Welcome to Lesson 6! JavaScript events are actions or occurrences that happen in the browser, such as clicking a button, typing in a form, moving the mouse, or scrolling. Event listeners are functions that wait for these actions and respond to them. Understanding events is key to making web pages interactive and responsive to user input.

There are many types of events, including:

• Mouse events: click, dblclick, mouseover, mouseout, mousemove
• Keyboard events: keydown, keyup, keypress
• Form events: submit, change, input, focus, blur
• Window events: load, resize, scroll

The simplest way to handle events is using the HTML attribute, like onclick:

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

However, it is better to use addEventListener in JavaScript:

let button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

Event listeners can handle multiple events on the same element. For example:

button.addEventListener("mouseover", function() {
  button.style.backgroundColor = "green";
});

button.addEventListener("mouseout", function() {
  button.style.backgroundColor = "initial";
});

Keyboard events allow you to respond to user input. For instance, detecting when the user presses the Enter key:

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

Form events are important for validating and processing user input before submission:

let form = document.querySelector("form");
form.addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent default submission
  let username = document.getElementById("username").value;
  console.log("Submitted username:", username);
});

Event propagation includes bubbling and capturing. Bubbling means the event starts from the target element and propagates upward to parent elements. Capturing does the opposite. You can control this using the third parameter in addEventListener:

element.addEventListener("click", handler, true); // Capturing
element.addEventListener("click", handler, false); // Bubbling

Events can also carry additional information via the event object, such as mouse coordinates, key codes, or target elements:

document.addEventListener("mousemove", function(event) {
  console.log("Mouse X:", event.clientX, "Mouse Y:", event.clientY);
});

By mastering events and event listeners, you can build interactive applications like dropdown menus, modals, slideshows, and drag-and-drop interfaces. Combining events with DOM manipulation gives you the ability to dynamically update content, respond to user actions, and create engaging user experiences.

Practical exercises include creating a real-time character counter, a button that changes colors on hover and click, a dynamic form validation system, and interactive image galleries. These exercises strengthen your understanding of event handling, DOM access, and user-driven interactivity.

By the end of this lesson, you should be able to:

• Understand different types of events in the browser
• Add event listeners using addEventListener
• Handle mouse, keyboard, form, and window events
• Use event propagation effectively
• Combine events with DOM manipulation for interactive pages

With events and event listeners, your websites can now react to users in real time. This is a crucial step toward creating fully interactive, professional-grade web applications. In the next lesson, we will explore Functions & Scope, which are key concepts for writing organized, reusable, and maintainable JavaScript code.