Event bubbling and delegation
Event bubbling and event delegation in JavaScript programming are important DOM fundamental programming concepts that help web developers control and manage the default spreading behaviour of event elements in the DOM, making it easier for web developers to handle event resources in the existing DOM, especially when web developers have content or information generated across multiple DOM elements or in dynamic orders.
Event Bubbling in JavaScript.
Event bubbling in JavaScript programming indicates the default behaviour of DOM events where an event triggered or executed in a DOM element automatically expands or “bubbles” to its parent element. Event bubbling helps the parent DOM element respond to DOM events triggered or executed through child DOM elements. In a particular order, when a DOM event is applied to a child element, it first runs handlers on that DOM element, then spreads or “bubbles” to its parent DOM element.
For example, if a web developer clicks a button inside a div tag element, this DOM event is first triggered or executed on that html button, then spreads or “bubbles” to the div tag, then to the webpage element body, and finally spreads or bubbles to the DOM document, until it is manually stopped in the order.
Example of event bubbling in JavaScript.
<div id=”domparent”>
<button id=”domchild”>Press button</button>
</div>
const domparent = document.getElementById(‘domparent’);
const domchild = document.getElementById(‘domchild’);
// here we use Event listener on child dom element
domchild.addEventListener(‘click’, () => {
console.log(‘Button pressed’);
});
// here we use Event listener on parent dom element
domparent.addEventListener(‘click’, () => {
console.log(‘domParent pressed’);
});
Here event bubbling action is performed in above DOM child and parent because here click event is first executed in button child element then it bubbles or spreads to div parent DOM element.
Stopping Event Bubbling in JavaScript.
JavaScript programmers can stop DOM event from spreading or bubbling to parent element by applying stopPropagation() method to event object. This feature is useful when programmer wants to handle or manage event only for a particular specific DOM element and not any preceding DOM element.
Example of preventing event bubbling in JavaScript.
child.addEventListener(‘click’, (event) => {
console.log(‘Button pressed’);
event.stopPropagation(); // here it used to Stop event from bubbling up action
});
parent.addEventListener(‘click’, () => {
console.log(‘Parent pressed’);
});
Here in this program “Parent pressed” message is not logged in event preventing method because here stopPropagation() method was used to stop spreading or bubbling up of DOM event to parent element.
Event capturing in JavaScript.
DOM event capturing or trickling in JavaScript programming is the opposite programming concept of bubbling method where the event capturing method moves the event down from the root of the DOM element to the target element instead of spreading or bubbling up from the target DOM element to the root.
A JavaScript programmer can enable the capturing method by indicating the capture option while adding an event listener to the program.
domparent.addEventListener(‘click’, () => {
console.log(‘Parent pressed (event capturing phase)’);
}, true); // here true property used to enables event capturing
Here in this program the default behaviour event bubbling (phase false) method is used but here when true behaviour is indicated, the DOM event is captured or logged first.
Event Delegation in JavaScript.
DOM event delegation is a powerful programming concept in JavaScript programming wherein instead of adding event listeners to multiple DOM elements, such as multiple DOM buttons or DOM list items, JavaScript web developers can add a single event listener to a parent DOM element. Where the event handler on the DOM parent element captures DOM events from child elements, allowing web developers to manage and control DOM events for dynamically created DOM elements or a large number of equal elements in a properly efficient order.
Why Use Event Delegation in JavaScript?
- Programming Efficiency – Instead of adding an event listener to individual child DOM elements, web developers can add a single event listener to the parent DOM element, reducing event listener quantity in the process, and improving web development interface performance.
- Dynamically created DOM elements – When new DOM elements are added to a JavaScript webpage in a dynamic order, the event delegation features here ensure that the parent listener handles and manages the events for these new DOM elements, without regrouping the listeners.
How event delegation works in JavaScript.
When a program triggers an event on a child DOM element, it accesses the parent DOM element, and it tests in the parent DOM element whether the target of the current event matches or is identical to the child elements that are to be handled or managed in the event.
For example, if a web developer has a list of list items, then the web developer can add a click event listener to the parent DOM element <ul> list, and when the developer clicks on a list item (<li>), the event listener in the <ul> tag catches it.
Example of event delegation in JavaScript.
<ul id=”list”>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4 </li>
</ul>
// here we Select the parent <ul> tag element
const listitem = document.getElementById(‘list’);
// here we Add an event listener on the parent dom element
listitem.addEventListener(‘click’, (event) => {
// here it Check if the click element is an <li> item group
if (event.target.tagName === ‘LI’) {
console.log(`Item pressed: ${event.target.textContent}`);
}
});
Here in this list group item, clicking on “element 2” or “element 3” gets logged to the respective item.
The list here will work even if new list elements are added to the <ul> in dynamic order, because the event is caught by the parent <ul> tag, and the event.target method can test the clicked child DOM element.
Adding new elements dynamically in JavaScript.
For example, if a web developer adds a new <li> tag DOM element in dynamic order, the event listener in the parent <ul> tag is still working.
const newItem = document.createElement(‘li’);
newItem.textContent = ‘element 5’;
list.appendChild(newItem);
Here in this program, clicking on “element 5” also executes the event listener for the parent element.
Benefits of using event delegation in JavaScript.
- Reduced memory usage – By grouping one event listener to a parent DOM element instead of multiple listeners for individual child DOM elements in a JavaScript program, web developers can reduce memory usage and improve its performance.
- Easier maintenance – Web developers do not need to add event listeners for individual new DOM child elements. As long as the event target matches a selector, such as li list tag, the event listener handles it.
- Handling dynamically added elements – Event delegation works for dynamically added DOM elements, so programmers do not need to group listeners after individual new elements are created.
Summary of event bubbling and event delegation in JavaScript.
- Event bubbling – In JavaScript programming, events executed on child DOM elements spread or bubble up to parent DOM elements. This is the default behaviour of event bubbling, and web developers can stop it with the stopPropagation() method.
- Event Capturing – The opposite of event bubbling in JavaScript programming is event capturing, where the event spreads from the root to the target element. This can be enabled with the capture option.
- Event Delegation – This is a feature in JavaScript programming in which a parent DOM element listens to events being executed in its child DOM elements. This is an efficient method, and works for DOM elements created in dynamic order.
- Benefits of Event Delegation – It reduces the quantity of event listeners in JavaScript programming, improves system performance, and makes it easier to control and manage DOM elements created in dynamic order.
