Event Bubbling

In JavaScript, event bubbling refers to the process in which an event is first handled by the element on which it occurred, and then it propagates (or bubbles up) to its parent elements in the DOM hierarchy, triggering their respective event handlers.

When an event occurs on an element, such as a click on a button, the event is first handled by the specific element that triggered it. After that, the event bubbles up through the ancestor elements of that element, invoking their event handlers as well.

Event bubbling is fundamental to how event handling works in JavaScript and is closely related to event propagation.

The Event Bubbling Process

Let's understand the event bubbling process with an example:

1<div id="grandparent">
2  <div id="parent">
3    <div id="child">
4      Click me
5    </div>
6  </div>
7</div>

In the above HTML structure, we have three nested elements: grandparent, parent, and child.

To demonstrate event bubbling, we can attach click event listeners to each of these elements:

1const grandparent = document.getElementById('grandparent');
2const parent = document.getElementById('parent');
3const child = document.getElementById('child');
4
5grandparent.addEventListener('click', event => {
6  console.log('Grandparent clicked!');
7});
8
9parent.addEventListener('click', event => {
10  console.log('Parent clicked!');
11});
12
13child.addEventListener('click', event => {
14  console.log('Child clicked!');
15});

When we click on the child element, the event listener attached to it will be invoked first, printing 'Child clicked!' to the console. After that, the event will continue to bubble up to the parent element, triggering its event listener and printing 'Parent clicked!'. Finally, the event will bubble up to the grandparent element, invoking its event listener and printing 'Grandparent clicked!'.

This sequence of event propagation from the innermost element to the outermost element is the essence of event bubbling.

Event bubbling allows us to capture an event at multiple levels in the DOM hierarchy. By attaching an event listener to a common ancestor element, we can handle events on nested elements without explicitly attaching event listeners to each individual element.

Event bubbling is powerful and can simplify event handling code. However, it's essential to understand event propagation and how it can affect event handling. We'll explore event propagation in more detail in the next section.

xxxxxxxxxx

// event listener attached to it, printing 'Grandparent clicked!'.

// When an event occurs on an element, it will first execute the event listeners attached to that element.

// After that, the event will 'bubble up' through its parent elements and trigger the event listeners

// attached to them.

​

// This process is known as 'event bubbling'. Event bubbling allows you to capture an event

// and handle it at multiple levels in the DOM hierarchy.

​

// Here's a simple example to demonstrate event bubbling:

​

// HTML

// <div id="grandparent">

//   <div id="parent">

//     <div id="child">

//       Click me

//     </div>

//   </div>

// </div>

​

// JavaScript

// const grandparent = document.getElementById('grandparent');

// const parent = document.getElementById('parent');

// const child = document.getElementById('child');

​

// grandparent.addEventListener('click', event => {

//   console.log('Grandparent clicked!');

// });

​

// parent.addEventListener('click', event => {

//   console.log('Parent clicked!');