Section 1.1 Scenario 1: Managing Excessive Event Listeners

Consider a situation where you have a large array of items, each with an individual event listener attached. This setup can quickly lead to performance issues, as the browser must handle a multitude of event listeners.

A more efficient method is to attach a single event listener to the parent element and utilize event delegation to process the events. This way, you maintain just one event listener that can adeptly manage events from all child elements.

// Before (inefficient)

const items = document.querySelectorAll('.list-item');

items.forEach(item => {

item.addEventListener('click', handleItemClick);

});

// After (optimized)

const listContainer = document.getElementById('list-container');

listContainer.addEventListener('click', function(event) {

if (event.target.classList.contains('list-item')) {

handleItemClick(event);

}

});

Section 1.2 Scenario 2: Stopping Event Bubbling

At times, it’s necessary to prevent the event from propagating up the DOM hierarchy. This is particularly relevant during form submissions or other critical user interactions.

// Prevent form submission and event bubbling

document.getElementById('my-form').addEventListener('submit', function(event) {

event.preventDefault();

event.stopPropagation();

// Handle form submission logic here

});

Section 1.3 Scenario 3: Utilizing Event Capturing

Although event bubbling is the more frequently utilized approach, event capturing can be advantageous in specific circumstances. For instance, you may wish to monitor a global click event and ascertain whether the click occurred outside a designated element.

// Handle global click event and check if it's outside a specific element

document.addEventListener('click', function(event) {

const myElement = document.getElementById('my-element');

if (!myElement.contains(event.target)) {

// Handle click outside of 'my-element'

}

}, true); // Set the third argument to 'true' to enable event capturing