Event Capturing in JavaScript with Practical Examples

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

JavaScript Event Handling: Exercise-14 with Solution

Event Capturing Example

Write a JavaScript program that demonstrates event capturing by adding listeners to parent and child elements.

Solution 1: Using addEventListener with Capturing Phase

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 capturing event listener to parent
parentDiv.addEventListener(
  'click',
  () => {
    console.log('Parent clicked (Capturing phase)');
  },
  true // Use capturing phase
);

// Add capturing event listener to child
childDiv.addEventListener(
  'click',
  () => {
    console.log('Child clicked (Capturing phase)');
  },
  true // Use capturing phase
);

Output:

"Parent clicked (Capturing phase)"
"Child clicked (Capturing phase)"
"Parent clicked (Capturing phase)"
"Parent clicked (Capturing phase)"
"Child clicked (Capturing phase)"

Explanation:

1. Create Elements:

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

2. Structure the DOM:

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

3. Add Event Listeners:

addEventListener is used on both parent and child elements with the third argument set to true to enable the capturing phase.

4. Log Messages:

Messages are logged during the capturing phase in the order: Parent clicked → Child clicked.

Solution 2: Inline Event Listeners with Capturing

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;" 
  id="parent"
>
  <div 
    style="width: 100px; height: 100px; background-color: pink; margin: auto;" 
    id="child"
  >
    Child
  </div>
</div>

<script>
// Add capturing event listener to parent
document.getElementById('parent').addEventListener(
  'click',
  () => {
    console.log('Parent clicked (Capturing phase)');
  },
  true // Use capturing phase
);

// Add capturing event listener to child
document.getElementById('child').addEventListener(
  'click',
  () => {
    console.log('Child clicked (Capturing phase)');
  },
  true // Use capturing phase
);
</script>
 
</body>
</html>

Output:

"Parent clicked (Capturing phase)"
"Child clicked (Capturing phase)"
"Parent clicked (Capturing phase)"

Explanation:

1. Inline HTML:

Parent and child <div> elements are defined directly in the HTML structure with unique IDs.

2. Event Listeners:

Capturing phase listeners are added using addEventListener with the third argument as true.

3. Log Messages:

Capturing phase ensures the event flows from the parent to the child (Parent clicked → Child clicked).

Live Demo:

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

Improve this sample solution and post your code through Disqus.

Event Handling Exercises Previous: Event Bubbling and stopPropagation in JavaScript.
Event Handling Exercises Next: API Calls with Debounced Input Events in JavaScript.