What is an Event Delegation in JS?

Before diving into understanding the event delegation, let’s first review what ‘addEventListener’ in JavaScript is. When we require a response upon clicking a button or triggering any other action, an event is generated. The browser captures this event and displays it. Now, we are ready to explore the concept of Event Delegation in JavaScript

for example you have three essential buttons: play, pause, and repeat for controlling music playback. and you wanted to raise the event those three buttons.

// Get references to the buttons
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');
const repeatButton = document.getElementById('repeatButton');

// Event listener for the Play button
playButton.addEventListener('click', function() {
    // Logic to play music
    console.log('Playing music...');
});

// Event listener for the Pause button
pauseButton.addEventListener('click', function() {
    // Logic to pause music
    console.log('Pausing music...');
});

// Event listener for the Repeat button
repeatButton.addEventListener('click', function() {
    // Logic to repeat music
    console.log('Repeating music...');
});

typically, creating an individual event listener for each button is a common approach. For instance, one listener plays music, another pauses it, and yet another handles the repetition of music.

If a DrawerNavigator has been created where an event triggers on two buttons, and there’s no listener assigned to the button, the event will bubble up to the parent. Thus, if there’s a listener in the parent, it will handle the event that’s moved up from the children.

Therefore, if we don’t create listeners for the three buttons but only for the parent element, and we click any of the children, the parent will handle that event. Inside its callback function, we’ll receive some parameters. We can specify any word as a parameter, which should not be a keyword. This word in the parameter will contain all the details about the event.
For instance, ‘event. target’ will inform us which button was clicked. We can handle different tasks using if-else conditions based on which button was clicked. For instance, if the play button is clicked, do something like this …

here is the example that I have explained above

<div id="musicControls">
    <button class="musicButton" data-action="play">Play</button>
    <button class="musicButton" data-action="pause">Pause</button>
    <button class="musicButton" data-action="repeat">Repeat</button>
</div>

// musicControls is a parent div where we only addEventListener
const musicControls = document.getElementById('musicControls');

// Event listener for the container element (using event delegation)
musicControls.addEventListener('click', function(event) {
    const targetButton = event.target;

    // Check if the clicked element is a button with the musicButton class
    if (targetButton.classList.contains('musicButton')) {
        const action = targetButton.getAttribute('data-action');

        // Perform actions based on the data-action attribute
        if (action === 'play') {
            // Logic to play music
            console.log('Playing music...');
        } else if (action === 'pause') {
            // Logic to pause music
            console.log('Pausing music...');
        } else if (action === 'repeat') {
            // Logic to repeat music
            console.log('Repeating music...');
        }
    }
});

in this example, we determine the action based on the ‘data-action’ attribute of the clicked button. The code checks the attribute value and performs the respective action (playing, pausing, or repeating music) using a series of if-else statements

In Simple Words, to optimize and consolidate code, we can use a single event listener and handle multiple tasks inside the callback function. We won’t need to create three individual event listeners for each button, and this approach is known as event delegation