Event Handling in JavaScript

Event handling is a fundamental concept in JavaScript that allows you to make web pages interactive by responding to user actions and browser events.

Introduction to Event Handling

Events are actions or occurrences that happen in the browser, such as clicks, mouse movements, keyboard presses, or page loads. JavaScript allows you to "listen" for these events and execute code in response.

Ways to Handle Events

1. HTML Event Attributes (Inline Events)

You can add event handlers directly in HTML elements:

<button onclick="handleClick()">Click me</button>

<script>
function handleClick() {
    alert('Button clicked!');
}
</script>

2. DOM Property Handlers

Assign event handlers using DOM element properties:

<button id="myButton">Click me</button>

<script>
const button = document.getElementById('myButton');
button.onclick = function() {
    alert('Button clicked!');
};
</script>

3. addEventListener() Method (Recommended)

The modern approach using addEventListener():

<button id="myButton">Click me</button>

<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});
</script>

Event Object

When an event occurs, the browser creates an event object containing information about the event:

document.getElementById('myButton').addEventListener('click', function(event) {
    console.log('Event type:', event.type);
    console.log('Target element:', event.target);
    console.log('Coordinates:', event.clientX, event.clientY);
    
    // Prevent default behavior
    event.preventDefault();
});

Event Propagation

Events in JavaScript propagate in three phases:

1. Capturing phase (from window to target)
2. Target phase (at the target element)
3. Bubbling phase (from target back to window)

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

<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('button');

// Event capturing (third parameter true)
outer.addEventListener('click', function() {
    console.log('Outer div (capturing)');
}, true);

// Event bubbling (default)
outer.addEventListener('click', function() {
    console.log('Outer div (bubbling)');
});

inner.addEventListener('click', function() {
    console.log('Inner div');
});

button.addEventListener('click', function(event) {
    console.log('Button clicked');
    // Stop propagation to prevent bubbling
    // event.stopPropagation();
});
</script>

Event Delegation

Event delegation allows you to attach a single event listener to a parent element to handle events for multiple children:

<ul id="itemList">
    <li data-id="1">Item 1</li>
    <li data-id="2">Item 2</li>
    <li data-id="3">Item 3</li>
</ul>

<script>
document.getElementById('itemList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Item clicked:', event.target.textContent);
        console.log('Data ID:', event.target.dataset.id);
    }
});

// Adding new items will automatically work with the same handler
const newItem = document.createElement('li');
newItem.textContent = 'Item 4';
newItem.dataset.id = '4';
document.getElementById('itemList').appendChild(newItem);
</script>

Common Event Types

Mouse Events

const box = document.getElementById('myBox');

box.addEventListener('click', () => console.log('Clicked'));
box.addEventListener('dblclick', () => console.log('Double clicked'));
box.addEventListener('mousedown', () => console.log('Mouse down'));
box.addEventListener('mouseup', () => console.log('Mouse up'));
box.addEventListener('mousemove', (e) => console.log(`Mouse at: ${e.clientX}, ${e.clientY}`));
box.addEventListener('mouseenter', () => console.log('Mouse entered'));
box.addEventListener('mouseleave', () => console.log('Mouse left'));

Keyboard Events

document.addEventListener('keydown', (e) => {
    console.log('Key pressed:', e.key);
    console.log('Key code:', e.code);
    
    // Ctrl + S combination
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        console.log('Save command');
    }
});

document.addEventListener('keyup', (e) => {
    console.log('Key released:', e.key);
});

Form Events

const form = document.getElementById('myForm');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('Form submitted');
});

form.addEventListener('reset', () => {
    console.log('Form reset');
});

const input = document.getElementById('myInput');
input.addEventListener('focus', () => console.log('Input focused'));
input.addEventListener('blur', () => console.log('Input lost focus'));
input.addEventListener('change', () => console.log('Input value changed'));
input.addEventListener('input', (e) => console.log('Input value:', e.target.value));

Window Events

window.addEventListener('load', () => {
    console.log('Page fully loaded');
});

window.addEventListener('DOMContentLoaded', () => {
    console.log('DOM content loaded');
});

window.addEventListener('resize', () => {
    console.log('Window resized:', window.innerWidth, 'x', window.innerHeight);
});

window.addEventListener('scroll', () => {
    console.log('Scrolled:', window.scrollY);
});

Custom Events

You can create and dispatch custom events:

// Create a custom event
const customEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'This is a custom event', time: new Date() },
    bubbles: true,
    cancelable: true
});

// Listen for the custom event
document.addEventListener('myCustomEvent', (e) => {
    console.log('Custom event received:', e.detail);
});

// Dispatch the event
document.dispatchEvent(customEvent);

// You can also dispatch events on specific elements
const button = document.getElementById('myButton');
button.addEventListener('success', (e) => {
    console.log('Success event:', e.detail);
});

const successEvent = new CustomEvent('success', {
    detail: { result: 'Operation completed successfully' }
});
button.dispatchEvent(successEvent);

Complete Example

Here's a complete example demonstrating various event handling techniques:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Event Handling</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
            display: inline-block;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
        .log {
            height: 200px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 20px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>JavaScript Event Handling Demo</h1>
    
    <div class="container">
        <h2>Click Events</h2>
        <button id="clickButton">Click Me</button>
        <div id="clickCount">Clicks: 0</div>
    </div>
    
    <div class="container">
        <h2>Mouse Events</h2>
        <div id="mouseBox" class="box">Hover or Click</div>
        <div id="mousePosition">Position: </div>
    </div>
    
    <div class="container">
        <h2>Keyboard Events</h2>
        <input type="text" id="keyInput" placeholder="Type here">
        <div id="keyOutput">Last key: </div>
    </div>
    
    <div class="container">
        <h2>Event Delegation</h2>
        <ul id="itemList">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        <button id="addItem">Add New Item</button>
    </div>
    
    <div class="container">
        <h2>Event Log</h2>
        <div id="eventLog" class="log"></div>
        <button id="clearLog">Clear Log</button>
    </div>

    <script>
        // Utility function to log events
        function logEvent(message) {
            const log = document.getElementById('eventLog');
            const entry = document.createElement('div');
            entry.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
            log.appendChild(entry);
            log.scrollTop = log.scrollHeight;
        }
        
        // Click events
        let clickCount = 0;
        document.getElementById('clickButton').addEventListener('click', function() {
            clickCount++;
            document.getElementById('clickCount').textContent = `Clicks: ${clickCount}`;
            logEvent(`Button clicked (${clickCount} times)`);
            
            // Dispatch custom event
            const customEvent = new CustomEvent('buttonClicked', {
                detail: { count: clickCount }
            });
            document.dispatchEvent(customEvent);
        });
        
        // Listen for custom event
        document.addEventListener('buttonClicked', function(e) {
            logEvent(`Custom event received with count: ${e.detail.count}`);
        });
        
        // Mouse events
        const mouseBox = document.getElementById('mouseBox');
        mouseBox.addEventListener('mouseenter', function() {
            this.style.backgroundColor = 'lightgreen';
            logEvent('Mouse entered the box');
        });
        
        mouseBox.addEventListener('mouseleave', function() {
            this.style.backgroundColor = 'lightblue';
            logEvent('Mouse left the box');
        });
        
        mouseBox.addEventListener('mousemove', function(e) {
            const rect = this.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            document.getElementById('mousePosition').textContent = 
                `Position: ${Math.round(x)}, ${Math.round(y)}`;
        });
        
        // Keyboard events
        document.getElementById('keyInput').addEventListener('keydown', function(e) {
            document.getElementById('keyOutput').textContent = `Last key: ${e.key} (Code: ${e.code})`;
            logEvent(`Key pressed: ${e.key}`);
        });
        
        // Event delegation
        document.getElementById('itemList').addEventListener('click', function(e) {
            if (e.target.tagName === 'LI') {
                logEvent(`Clicked on: ${e.target.textContent}`);
                e.target.classList.toggle('selected');
            }
        });
        
        document.getElementById('addItem').addEventListener('click', function() {
            const list = document.getElementById('itemList');
            const newItem = document.createElement('li');
            newItem.textContent = `Item ${list.children.length + 1}`;
            list.appendChild(newItem);
            logEvent('Added new item to list');
        });
        
        // Clear log button
        document.getElementById('clearLog').addEventListener('click', function() {
            document.getElementById('eventLog').innerHTML = '';
            logEvent('Log cleared');
        });
        
        // Window events
        window.addEventListener('resize', function() {
            logEvent(`Window resized: ${window.innerWidth}x${window.innerHeight}`);
        });
        
        // Initial log entry
        logEvent('Page loaded and event handlers registered');
    </script>
</body>
</html>

This comprehensive example demonstrates various event handling techniques in JavaScript, including:

• Click events with counter
• Mouse events with position tracking
• Keyboard events
• Event delegation for dynamic content
• Custom events
• Window events

You can copy this code into an HTML file and run it in a browser to see event handling in action.