Understanding Callbacks with Event Listeners & Timers

This interactive page demonstrates how callbacks work with event listeners and timers in JavaScript.

1. Basic Event Listeners

Event listeners are a perfect example of callbacks. The callback function is executed when the event occurs.

Example Code:
// Adding a click event listener to a button
document.getElementById("clickButton").addEventListener("click", function() {
    document.getElementById("clickOutput").textContent = "Button was clicked!";
});
Output will appear here...

2. Event Object in Callbacks

Event listener callbacks receive an event object that contains information about the event.

Example Code:
// Using the event object in a callback
document.getElementById("infoButton").addEventListener("click", function(event) {
    const output = document.getElementById("eventOutput");
    output.innerHTML = `
        Event type: ${event.type}

        Target element: ${event.target.tagName}

        Coordinates: X=${event.clientX}, Y=${event.clientY}

        Time: ${new Date().toLocaleTimeString()}
    `;
});
Click the button to see event information...

3. Multiple Event Listeners

You can attach multiple event listeners to the same element. Each callback will execute when the event occurs.

Example Code:
// First event listener
document.getElementById("multiButton").addEventListener("click", function() {
    document.getElementById("multiOutput").textContent += "First callback executed! ";
});

// Second event listener on the same button
document.getElementById("multiButton").addEventListener("click", function() {
    document.getElementById("multiOutput").textContent += "Second callback executed! ";
});
Output will appear here...

4. Different Event Types

Elements can listen for various types of events with different callbacks.

Example Code:
const inputElement = document.getElementById("demoInput");

// Input event occurs when value changes
inputElement.addEventListener("input", function() {
    document.getElementById("inputOutput").textContent = 
        `Current value: ${this.value}`;
});

// Focus event
inputElement.addEventListener("focus", function() {
    document.getElementById("inputOutput").textContent += 
        "\nInput is focused!";
});

// Blur event (losing focus)
inputElement.addEventListener("blur", function() {
    document.getElementById("inputOutput").textContent += 
        "\nInput lost focus!";
});
Interact with the input to see events...

5. Mouse Movement Events

The mousemove event demonstrates how callbacks can be called rapidly many times.

Example Code:
const moveArea = document.getElementById("mouseMoveArea");
const moveOutput = document.getElementById("moveOutput");

moveArea.addEventListener("mousemove", function(event) {
    const rect = moveArea.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    
    moveOutput.textContent = `Mouse position: X=${Math.round(x)}, Y=${Math.round(y)}`;
});
Move mouse here
Move your mouse in the area above...

6. Basic Timers

setTimeout and setInterval use callbacks to execute code after a specified delay or at regular intervals.

Example Code:
// setTimeout - executes once after a delay
function delayedMessage() {
    setTimeout(function() {
        document.getElementById("timeoutOutput").textContent = 
            "This message appeared after 2 seconds!";
    }, 2000); // 2000 milliseconds = 2 seconds
    
    document.getElementById("timeoutOutput").textContent = 
        "Waiting for 2 seconds...";
}
Output will appear here...

7. Interval Timers

setInterval executes a callback repeatedly at specified intervals.

Example Code:
// setInterval - executes repeatedly
let counter = 0;
let intervalId;

function startCounter() {
    // Clear any existing interval first
    clearInterval(intervalId);
    
    counter = 0;
    document.getElementById("intervalOutput").textContent = "Counter: " + counter;
    
    intervalId = setInterval(function() {
        counter++;
        document.getElementById("intervalOutput").textContent = "Counter: " + counter;
        
        // Stop after reaching 10
        if (counter >= 10) {
            clearInterval(intervalId);
            document.getElementById("intervalOutput").textContent += 
                "\nCounter stopped after reaching 10";
        }
    }, 1000); // Execute every 1 second
}
Output will appear here...

8. Progress Bar with Timers

Combining setInterval with DOM updates to create a progress bar.

Example Code:
let progress = 0;
let progressIntervalId;

function startProgress() {
    // Reset first
    clearInterval(progressIntervalId);
    progress = 0;
    
    const progressBar = document.getElementById("progressBar");
    progressBar.style.width = "0%";
    
    document.getElementById("progressOutput").textContent = "Progress: 0%";
    
    progressIntervalId = setInterval(function() {
        progress += 1;
        progressBar.style.width = progress + "%";
        document.getElementById("progressOutput").textContent = 
            `Progress: ${progress}%`;
        
        if (progress >= 100) {
            clearInterval(progressIntervalId);
            document.getElementById("progressOutput").textContent += 
                "\nProgress complete!";
        }
    }, 50); // Update every 50ms for smooth animation
}
Click to start progress...

9. Clearing Timers

Using clearTimeout and clearInterval to cancel scheduled callbacks.

Example Code:
let timeoutId;

function startTimeout() {
    // Clear any existing timeout
    clearTimeout(timeoutId);
    
    document.getElementById("clearOutput").textContent = 
        "Timeout started. Will execute in 5 seconds...";
    
    timeoutId = setTimeout(function() {
        document.getElementById("clearOutput").textContent = 
            "Timeout executed!";
    }, 5000);
}

function cancelTimeout() {
    clearTimeout(timeoutId);
    document.getElementById("clearOutput").textContent = 
        "Timeout was cancelled!";
}
Use the buttons above...

10. Nested Timers

Creating a sequence of actions with nested timers.

Example Code:
function startSequence() {
    const output = document.getElementById("sequenceOutput");
    output.textContent = "Starting sequence...";
    
    setTimeout(function() {
        output.textContent += "\nFirst action after 1 second";
        
        setTimeout(function() {
            output.textContent += "\nSecond action after 2 more seconds";
            
            setTimeout(function() {
                output.textContent += "\nThird action after 3 more seconds";
                output.textContent += "\nSequence complete!";
            }, 3000);
            
        }, 2000);
        
    }, 1000);
}
Use the button to start a sequence...