Mechanisms and types of JavaScript event propagation, and how to control propagation

01/03/2024

In JavaScript, we will explain in detail the mechanism and types of event propagation, and how to control propagation .

TOC

What is event propagation?

Event propagation means that when an event occurs on an element, the event may be propagated (propagated) not only to the element itself, but also to the element’s ancestor and descendant elements. This event propagation is called event bubbling .

Through event propagation, for example, when a certain button is clicked, the element that contains the button and higher-level elements (for example, parent elements and ancestor elements) can also be processed as if they had been clicked. This is because event propagation has the advantage of allowing you to control multiple elements at once.

There are three types of event propagation:

event bubbling
- This is a method of propagating events from the element where the event occurs to higher-level elements.
event capturing
- This is a method of propagating an event from the element where it occurs to lower elements.
Event processing on target
- This is how events are handled only on the element where the event occurs.

By understanding and properly controlling these event propagations, you can achieve complex event processing.

Event propagation type

There are three types of event propagation. They are called the “capturing phase,” “targeting phase,” and “bubbling phase,” respectively.

capturing phase
- This phase begins with the element where the event occurs and propagates toward higher-level elements . The event propagates from the element where the event occurs to the parent element, then to the parent element of that parent element, and so on. Events can be captured during this phase.
target phase
- This is the phase that reaches the element where the event occurred . In this phase the event can be processed against the target.
bubbling phase
- This phase begins with the element where the event occurs and propagates down to lower elements . After the target phase ends, the event propagates from the target element to its subordinate elements. You can also bubble events during this phase.

Event propagation occurs for elements that have a parent-child relationship. By understanding how event propagation works, you can control event propagation. You can also use event propagation to uniformly process events for parent and child elements.

How to control event propagation

There are several ways to control event propagation. Each method is explained below.

Disable capturing and bubbling
- Disabling event propagation prevents capturing and bubbling. This can be achieved by passing or addEventListeneras the third argument of the method . If you pass , it will be processed in the capturing phase, and if you pass , it will be processed in the bubbling phase. If you want to disable both, use the method:truefalsetruefalseremoveEventListener
Stopping event propagation
- Stopping event propagation prevents further event propagation. This event.stopPropagation()uses the method By calling this method on the element where event propagation occurred, you can stop further event propagation starting from that element.
Overriding default behavior
- By disabling the default behavior of the element where the event occurs, you can disable the functionality of that element. This event.preventDefault()uses the method You can override the default behavior of an element by calling this method on the element where the event propagation occurred.

Explanation using a sample program

Sample program using stopPropagation

First, let’s look at an example of using the stopPropagation() method, which is used to stop the propagation of events. The following is a sample program that uses the stopPropagation() method.

<!DOCTYPE html>
<html>
<head>
	<title>stopPropagation()</title>
</head>
<body>
	<div id="outer" style="border: 2px solid red; padding: 20px;">
		<div id="inner" style="border: 2px solid blue; padding: 20px;">
			<button id="btn">Click me</button>
		</div>
	</div>
	<script>
		var outer = document.getElementById("outer");
		var inner = document.getElementById("inner");
		var btn = document.getElementById("btn");

		outer.addEventListener("click", function() {
			console.log("Outer div clicked");
		});

		inner.addEventListener("click", function() {
			console.log("Inner div clicked");
		});

		btn.addEventListener("click", function(event) {
			console.log("Button clicked");
			event.stopPropagation();
		});
	</script>
</body>
</html>

In this program, the stopPropagation() method is used to stop event propagation when a button is clicked. When the button is clicked, the button’s event listener is called, but event propagation stops here, and no events are propagated to the parent elements, inner and outer.

Sample program using stopImmediatePropagation

This section describes the stopImmediatePropagation() method. This method, like stopPropagation(), stops event propagation, but whereas stopPropagation() calls all listeners before stopping propagation, stopImmediatePropagation() stops calling the current listener and prevents subsequent listener calls, It also prevents subsequent listeners from being called.

The following is sample code that uses the stopImmediatePropagation() method. When a click event occurs, the first listener stops propagation, so the second listener is not called.

<button id="btn">Click me</button>

<script>
const btn = document.getElementById('btn');

btn.addEventListener('click', function(event) {
  console.log('First listener');
  event.stopImmediatePropagation();
});

btn.addEventListener('click', function(event) {
  console.log('Second listener');
});
</script>

When you run this code, only “First listener” will be output to the console when clicked, and “Second listener” will not be output.

Sample program using preventDefault

Finally, preventDefault()let’s talk about methods. This method cancels the default event behavior. For example, a link click event would normally lead to a link destination, but you preventDefault()can use a method to prevent this.

Below preventDefault()is a sample code using the method. When a link is clicked, an alert will be displayed to prevent the default navigation.

<a href="https://example.com" id="link">Click me</a>

<script>
const link = document.getElementById('link');

link.addEventListener('click', function(event) {
  event.preventDefault();
  alert('Link clicked!');
});
</script>

When you run this code, when you click a link, you will receive an alert saying “Link clicked!” and you will not be able to navigate to the link destination.

This concludes the description of the three methods for controlling event propagation and the sample code that uses each method.

summary

We explained the mechanism and types of event propagation, and how to control the propagation.

There are two types of event propagation in JavaScript: “capturing”, in which events are transmitted from the event source to parent elements and ancestor elements, and “bubbling”, in which events are transmitted from the event source to child and grandchild elements.
By using event propagation, the same event can be applied to all elements in a parent-child relationship.
The stopPropagation() and stopImmediatePropagation() methods can be used to control event propagation.
You can cancel the default behavior of an event by using the preventDefault() method.

Event propagation is one of the important functions of JavaScript, and is essential knowledge when developing web applications. By understanding event propagation, you can implement event handling for elements in a parent-child relationship.

Also, by mastering the stopPropagation() and preventDefault() methods, you can control event propagation more flexibly.