7.1 Event Bubbling
In JavaScript, events that occur in one element can propagate through the DOM tree. This process is called event propagation and includes two main mechanisms: event bubbling and event capturing.
Event Propagation Mechanisms:
- Event Bubbling.
- Event Capturing.
Event Bubbling is the process where an event triggered in a child element progressively propagates up the chain of parents to the root element (usually document).
Explanation:
- When the
childbutton is clicked, the event handler on thechildelement is triggered first (Child clicked). - Then the event bubbles up to the
parentelement, and its handler is triggered (Parent clicked).
Example:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing
Event Capturing is the process where the event propagates first from the root element down the chain of parents to the target element where the event occurred.
To use event capturing, you need to set the capture parameter to true when adding an event handler.
Explanation:
- When the
childbutton is clicked, the event handler on the parent element is triggered first (Parent clicked) thanks to thecaptureparameter being set totrue. - Then the event reaches the target element
child, and its handler is triggered (Child clicked).
Example:
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Three-Phase Event Propagation Model
The event handling process in the DOM involves three phases:
1. Capturing Phase. The event propagates from the root element (usually document) down the chain of parents to the target element.
2. Target Phase. The event reaches the target element where it occurred.
3. Bubbling Phase. The event propagates from the target element up the chain of parents to the root element.
Control Event Propagation
There are methods to control event propagation:
stopPropagation(). Stops further event propagation both during bubbling and capturing.stopImmediatePropagation(). Stops further event propagation and prevents other event handlers on the current element from executing.preventDefault(). Cancels the default action associated with the event (e.g., form submission on button click).
7.4 Example Using stopPropagation
Explanation:
- When the
childbutton is clicked, the event handler on thechildelement is triggered (Child clicked). - Event bubbling is stopped using
event.stopPropagation(), and the event handler on the parent element is not triggered.
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Stops event bubbling
});
</script>
</body>
</html>
GO TO FULL VERSION