Event Propagation and Delegation

Visualizing Event Propagation

Consider this HTML structure:

<div id="outer">
    <div id="middle">
        <button id="inner">Click Me</button>
    </div>
</div>

Let's attach event listeners to each element in both phases:

// Get elements
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

// Capturing phase listeners (third parameter true)
outer.addEventListener('click', function(event) {
    console.log('1. CAPTURE phase: Outer div');
}, true);

middle.addEventListener('click', function(event) {
    console.log('2. CAPTURE phase: Middle div');
}, true);

inner.addEventListener('click', function(event) {
    console.log('3. CAPTURE phase: Inner button');
}, true);

// Bubbling phase listeners (third parameter false or omitted)
outer.addEventListener('click', function(event) {
    console.log('6. BUBBLE phase: Outer div');
});

middle.addEventListener('click', function(event) {
    console.log('5. BUBBLE phase: Middle div');
});

inner.addEventListener('click', function(event) {
    console.log('4. BUBBLE phase: Inner button');
});

When clicking the button, you'll see this sequence in the console:

1. CAPTURE phase: Outer div
2. CAPTURE phase: Middle div
3. CAPTURE phase: Inner button
4. BUBBLE phase: Inner button
5. BUBBLE phase: Middle div
6. BUBBLE phase: Outer div

Without Event Delegation

// Without delegation - inefficient for many elements
document.querySelectorAll('.menu-item').forEach(item => {
    item.addEventListener('click', function(event) {
        console.log('Item clicked:', this.textContent);
        navigateToSection(this.dataset.section);
    });
});

With Event Delegation

// With delegation - one listener handles all items
document.getElementById('menu').addEventListener('click', function(event) {
    // Find the closest .menu-item that was clicked (or a child of it)
    const menuItem = event.target.closest('.menu-item');
    
    // If a menu item was clicked
    if (menuItem) {
        console.log('Item clicked:', menuItem.textContent);
        navigateToSection(menuItem.dataset.section);
    }
});

Advanced Delegation Example

// HTML structure
// <div id="task-list">
//   <div class="task-item" data-id="1">
//     <span class="task-title">Task 1</span>
//     <div class="task-actions">
//       <button class="edit-btn">Edit</button>
//       <button class="delete-btn">Delete</button>
//       <button class="complete-btn">Complete</button>
//     </div>
//   </div>
//   <!-- More task items... -->
// </div>

const taskList = document.getElementById('task-list');

// One listener handles all task-related actions
taskList.addEventListener('click', function(event) {
    // Find the task item containing the clicked element
    const taskItem = event.target.closest('.task-item');
    
    // If not clicking on a task item or its children, exit
    if (!taskItem) return;
    
    // Get the task ID
    const taskId = taskItem.dataset.id;
    
    // Handle different button clicks
    if (event.target.classList.contains('edit-btn')) {
        editTask(taskId);
    } else if (event.target.classList.contains('delete-btn')) {
        deleteTask(taskId);
    } else if (event.target.classList.contains('complete-btn')) {
        completeTask(taskId);
    } else if (event.target.classList.contains('task-title')) {
        showTaskDetails(taskId);
    }
});

// Functions to handle various actions
function editTask(id) {
    console.log('Editing task:', id);
    // Implementation...
}

function deleteTask(id) {
    console.log('Deleting task:', id);
    // Implementation...
}

function completeTask(id) {
    console.log('Marking task complete:', id);
    // Implementation...
}

function showTaskDetails(id) {
    console.log('Showing details for task:', id);
    // Implementation...
}

Using Bubbling Alternatives

// Instead of individual focus/blur handlers:
document.querySelectorAll('input').forEach(input => {
    input.addEventListener('focus', handleFocus);
    input.addEventListener('blur', handleBlur);
});

// Use bubbling events with delegation:
document.querySelector('form').addEventListener('focusin', function(event) {
    if (event.target.tagName === 'INPUT') {
        handleFocus.call(event.target, event);
    }
});

document.querySelector('form').addEventListener('focusout', function(event) {
    if (event.target.tagName === 'INPUT') {
        handleBlur.call(event.target, event);
    }
});

Delegated Custom Events

// Set up a custom event system with delegation
const EventSystem = {
    // Create and dispatch a custom event
    trigger: function(element, eventName, detail = {}) {
        const event = new CustomEvent(eventName, {
            bubbles: true,      // Enable bubbling for delegation
            cancelable: true,   // Allow preventing default behavior
            detail: detail      // Custom data to pass with the event
        });
        
        element.dispatchEvent(event);
    },
    
    // Set up delegated handling of custom events
    delegate: function(container, eventName, selector, handler) {
        container.addEventListener(eventName, function(event) {
            // If this is a custom event, use event.target
            // If it bubbled from a regular event, use event.detail.originalEvent.target
            const target = event.detail.originalEvent ? 
                           event.detail.originalEvent.target : 
                           event.target;
            
            // Find matching element
            const matchedElement = target.closest(selector);
            
            if (matchedElement) {
                // Call handler with matched element as 'this'
                handler.call(matchedElement, event, event.detail);
            }
        });
    }
};

// Usage example
// Set up delegation for a custom event
EventSystem.delegate(document.body, 'item:select', '.list-item', function(event, detail) {
    console.log('Item selected:', this);
    console.log('Extra data:', detail);
});

// Trigger the custom event
const item = document.querySelector('.list-item');
EventSystem.trigger(item, 'item:select', {
    index: 5,
    value: 'Sample Item'
});

// You can also use it to create higher-level events from regular DOM events
document.querySelector('.product-list').addEventListener('click', function(event) {
    if (event.target.closest('.buy-button')) {
        const product = event.target.closest('.product');
        
        // Create a custom semantic event that includes the original event
        EventSystem.trigger(product, 'product:buy', {
            originalEvent: event,
            productId: product.dataset.id,
            productName: product.querySelector('.product-name').textContent,
            price: parseFloat(product.dataset.price)
        });
        
        // Prevent default behavior of the original event
        event.preventDefault();
    }
});