Event Bubbling and stopPropagation in JavaScript

Last update on January 16 2025 12:57:20 (UTC/GMT +8 hours)

JavaScript Event Handling: Exercise-13 with Solution

Stop Propagation Example

Write a JavaScript program that demonstrates event bubbling and uses stopPropagation to stop the event at a specific level.

Solution 1: Using addEventListener for Parent and Child Elements

JavaScript Code:

// Create parent and child elements
const parentDiv = document.createElement('div');
const childDiv = document.createElement('div');

// Style the elements for visibility
parentDiv.style.width = '200px';
parentDiv.style.height = '200px';
parentDiv.style.backgroundColor = 'lightblue';
parentDiv.style.position = 'relative';

childDiv.style.width = '100px';
childDiv.style.height = '100px';
childDiv.style.backgroundColor = 'pink';
childDiv.style.position = 'absolute';
childDiv.style.top = '50px';
childDiv.style.left = '50px';

// Append child to parent and parent to document body
parentDiv.appendChild(childDiv);
document.body.appendChild(parentDiv);

// Add event listener to the parent element
parentDiv.addEventListener('click', () => {
  console.log('Parent clicked');
});

// Add event listener to the child element
childDiv.addEventListener('click', (event) => {
  console.log('Child clicked');
  event.stopPropagation(); // Stop the event from bubbling up to the parent
});

Output:

"Parent clicked"
"Child clicked"
"Parent clicked"
"Parent clicked"

Explanation:

1. Create Elements:

A div is created for the parent and child elements, styled for easy visibility.

2. Structure the DOM:

The child <div> is appended to the parent <div>, and the parent is appended to the document body.

3. Event Listener for Parent:

The parent has an event listener logging Parent clicked when clicked.

4. Event Listener for Child:

The child has an event listener logging Child clicked and uses event.stopPropagation() to prevent the event from propagating to the parent.

Solution 2: Using Inline onclick Attributes

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <div style="width: 200px; height: 200px; background-color: lightblue;"    onclick="console.log('Parent clicked')">
  <div style="width: 100px; height: 100px; background-color: pink; margin: auto;" 
    onclick="handleChildClick(event)" >
    Child
  </div>
</div>

<script>
// Function to handle child click and stop propagation
function handleChildClick(event) {
  console.log('Child clicked');
  event.stopPropagation(); // Stop event bubbling
}
</script>
</body>
</html>

Output:

"Child clicked"
"Parent clicked"
"Parent clicked"
"Child clicked"

Explanation:

1. Inline Structure:

The parent and child <div> elements are created directly in HTML with onclick attributes.

2. Parent onclick:

Logs Parent clicked when the parent is clicked.

3. Child onclick:

Calls the handleChildClick function, which logs Child clicked and prevents event propagation using event.stopPropagation().

Live Demo:

See the Pen javascript-event-handling-exercise-13 by w3resource (@w3resource) on CodePen.

Improve this sample solution and post your code through Disqus.

Event Handling Exercises Previous: JavaScript: Prevent Form Submission and Log Inputs.
Event Handling Exercises Next: Event Capturing in JavaScript with Practical Examples.