Lecture 7 : JS Events, Event Listeners, Bubbling Vs Capturing and Throttling Vs Debouncing in JS

When a user clicks a button, submits an HTML form, or scrolls down a page, the web browser generates a specific signal that something significant has occurred.

Understanding how to intercept and handle these signals is the key to responsive web development. This deep dive into JavaScript Events covers everything from basic event handling to complex optimization strategies, ensuring your applications remain clean, fast, and responsive.

What Are JavaScript Events and How Do They Work?

In simple terms, JavaScript Events are actions or occurrences that happen in the system you are programming, which the browser tells you about so your code can react. Every element on a web page has certain milestones that can trigger JavaScript functions.

The system fires a signal when an event occurs, providing an explicit mechanism to automatically run a block of code. These occurrences attach to specific items inside the browser window, such as a single HTML element, a group of elements, the loaded document, or the entire browser window object.

Types of Common Browser Events

Modern web applications interact with several built-in categories of JavaScript:

• Mouse Events: Triggered by physical interactions, including a mouse click (click), double clicks (dblclick), tracking pointer movements (mousemove), or hovering over a hot spot (mouseover and mouseout).

• Keyboard Events: Generated when a user interacts with their keyboard, firing signals like pressing down a key (keydown) or releasing a key (keyup).

• Form Events: Occur when navigating web forms, such as selecting an input box (focus), leaving an input field (blur), changing an input element value (change), or submitting a complete form (submit).

• Window Events: Fired by the browser state, including when a web page or an image finishes loading (load), or when the user resizes or scrolls the browser window.

How to Implement Listeners in JavaScript Events?

To catch a signal fired by the browser, you must implement code that waits for that specific occurrence. The official, recommended mechanism to manage this is attaching event listeners in JavaScript using the native DOM API.

Using the addEventListener Method

The addEventListener() method is highly versatile because it allows you to assign multiple functions to a single element without overwriting existing behavior. It takes two primary parameters: the string name of the event and a callback function that runs when the action takes place.

JavaScript

// Selecting an HTML button element
const actionButton = document.querySelector("button");

// Attaching a click listener
actionButton.addEventListener("click", function() {
    console.log("The button element was clicked!");
});

Traditional Event Handler Properties

Before the modern standard, developers used event handler properties directly on objects. These properties match the name of the event prefixed with "on", such as onclick, onmouseover, or onchange.

JavaScript

const emailField = document.getElementById("email");

// Using an event handler property
emailField.onchange = function() {
    console.log("The email address input value has changed.");
};

While functional, this approach has a critical limitation: it only supports a single handler. Assigning a new function completely replaces the previous one.

Inline HTML Event Attributes

Another legacy technique involves writing handlers inside your HTML tags directly as attributes. For instance, <button onclick="alert('Clicked!')">Submit</button>.

Professional developers heavily discourage inline attributes. Mixing JavaScript logic directly into HTML structures disrupts clean code architecture, complicates debugging, and creates security holes.

JavaScript Events Bubbling vs Capturing

When an event fires on an element nested deep inside other elements, it does not exist in isolation. Instead, the signal travels through the document object model tree. This journey is known as event propagation, and it breaks down into two distinct phases: event bubbling vs capturing.

What is Event Bubbling?

Event bubbling is the default behavior in modern web scripting. When an action occurs on a child node, the event propagates directly upward through its ancestors. The browser checks the target node for a listener, then moves to its immediate parent element, continuing all the way up to the root element (<html>) and the global window object.

What is Event Capturing?

Event capturing is the exact opposite of bubbling. The propagation begins at the very root of the document structure and flows downward to the specific target element. To run a function during this initial downward phase, you must explicitly pass a configuration object or a boolean value of true as the third parameter inside your listener declaration.

JavaScript

// Registering an event listener in the capturing phase
parentElement.addEventListener("click", handleParentClick, true);

Controlling Propagation with StopPropagation

Sometimes, you want to stop an action from travelling through the DOM structure to prevent parent elements from firing overlapping rules. You can call the event.stopPropagation() on the incoming event object to immediately halt further movement up or down the DOM tree.

JavaScript Events Throttling vs Debouncing

Some JavaScript, such as scrolling, resizing the browser window, moving the mouse, or typing in a search box, can happen many times every second. If a function runs every time the event occurs, it can slow down the website and affect performance.

To solve this problem, developers use two common techniques: debouncing and throttling. These methods control how often a function is allowed to run.

How Debouncing Works

Debouncing delays the execution of a function until the user stops performing an action for a specific amount of time. If the action happens again before the timer ends, the timer starts over.

Example: Imagine an elevator door waiting to close. Every time a new person enters, the timer resets. The door only closes when no one enters for a few seconds.

Best Used For:

• Search boxes

• Form validation

• Auto-save features

• Live search suggestions

In these situations, you only need the final result after the user stops typing or interacting.

JavaScript

function debounce(callback, delay) {

    let timeoutId;

    return function (...args) {

        clearTimeout(timeoutId);

        timeoutId = setTimeout(() => {

            callback.apply(this, args);

        }, delay);

    };

}

How Throttling Works

Throttling limits how often a function can run during a specific time period. Even if the event occurs many times, the function will only execute once within the set interval.

Example: Think of a security camera that takes one photo every two seconds. It does not matter how much movement happens; the camera only captures images at fixed intervals.

Best Used For:

• Infinite scrolling

• Window resizing

• Mouse movement tracking

• Game updates

• Scroll position tracking

In these cases, updates are needed continuously, but not on every single event.

JavaScript

function throttle(callback, interval) {

    let shouldWait = false;

    return function (...args) {

        if (shouldWait) return;

        callback.apply(this, args);

        shouldWait = true;

        setTimeout(() => {

            shouldWait = false;

        }, interval);

    };

}

Debouncing vs Throttling

Raw Input:   [A] [B] [C] -------- [D] [E] --------

Debounce:    ----------------[Result] --------[Result]

Throttle:    [Result] ---- [Result] ---- [Result]

• Debouncing waits until the user stops performing an action before running the function.

• Throttling runs the function at regular intervals while the action continues.

When Should You Use Debounce or Throttle?

• Use debounce when only the final action matters, such as search inputs, form validation, and auto-saving.

• Use throttle when continuous updates are needed, such as scrolling, resizing, and mouse tracking.

Understanding throttling vs debouncing is important for improving website performance. Both techniques reduce unnecessary function calls, make web applications faster, and provide a smoother user experience.

How to Stop Default Browser Actions in JavaScript Events?

Many JavaScript functions have default actions that the browser performs automatically. For example, clicking a link opens a new page, and submitting a form usually refreshes the webpage. Sometimes developers need to stop these actions so they can run their own custom code first.

JavaScript provides the event.preventDefault() method for this purpose. It prevents the browser from performing its default action and allows developers to control what happens next.

Why Use event.preventDefault()?

The event.preventDefault() method is useful in many situations, including:

• Validating form data before submission.

• Preventing page refresh when a form is submitted.

• Stopping links from opening immediately.

• Creating custom buttons and navigation systems.

• Running checks before sending data to a server.

• Building smooth user experiences without unnecessary page reloads.

Example: Prevent Form Submission

In the example below, the form will not refresh the page when the user clicks the submit button. Instead, JavaScript will run the custom code inside the event listener.

JavaScript

const registrationForm = document.getElementById("signupForm");

registrationForm.addEventListener("submit", function(event) {

    // Stop the default form submission

    event.preventDefault();

    console.log("Form submission intercepted for data validation.");

});

How It Works

1. The form listens for the submit event.

2. When the user submits the form, the event is triggered.

3. The event.preventDefault() method stops the browser from refreshing the page.

4. JavaScript can then validate inputs, display messages, or send data using other methods.

Benefits of Using an event.preventDefault()

• Prevents unwanted page refreshes.

• Allows form validation before submission.

• Improves user experience.

• Makes web applications more interactive.

• Gives developers full control over browser behavior.

Using event.preventDefault() is a common and important technique in JavaScript because it helps developers create custom functionality while controlling default browser actions.