Introduction
In JavaScript, events are things that happen and have the potential to cause particular functionality or behaviors. A "click" or "hover" is a typical illustration of an occurrence. You can program listeners to detect these kinds of events, which will cause the functionality you want to work.
Event Bubbling and Capturing
In propagation, there are two stages: capturing and bubbling. In its most basic forms, capturing moves from the root to the target, and bubbling moves from the target to the root. That doesn't make much sense, though, until we first define what a target and a root are.
The DOM node that you click on or that any other event triggers is the target.
The event target could be a button that has a click event, for instance.
The target's highest-level parent is called the root. Usually, this is the document, which is a parent of the, which is your target element's (potentially remote) parent.
Our examples will focus on the bubbling phase because capturing is not nearly as prevalent as bubbling. However, EventTarget.addEventListener() has a third optional parameter that affects the propagation phase and accepts a boolean as its input. The listener will enter the capturing phase if the useCapture argument is passed true. As false is the default, it will be applied during the bubbling phase.
Once the event is started, it will propagate all the way up to the root and start all of the event handlers that belong to the same type. If your button, for instance, contains a click event, it will bubble up to the root and cause each click event it encounters during the bubbling phase.
Event Bubbling
While developing a webpage or a website via JavaScript, the concept of event bubbling is used where the event handlers are invoked when one element is nested on to the other element and are part of the same event. This technique or method is known as Event Bubbling. Thus, while performing event flow for a web page, event bubbling is used. We can understand event bubbling as a sequence of calling the event handlers when one element is nested in another element, and both the elements have registered listeners for the same event. So beginning from the deepest element to its parents covering all its ancestors on the way to top to bottom, calling is performed.
Let's look at the below example to grasp the working principle of Event Bubbling:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event Bubbling</title>
</head>
<body>
<div id="p1">
<button id="c1">I am child button</button>
</div>
<script>
var parent = document.querySelector('#p1');
parent.addEventListener('click', function(){
console.log("Parent is invoked");
});
var child = document.querySelector('#c1');
child.addEventListener('click', function(){
console.log("Child is invoked");
});
</script>
</body>
</html>
Explanation of the code above;
The code above is built using JavaScript and HTML. We used a div tag with the div id = p1, and we nested a button with the button id = c1 within the div. Now, in the JavaScript section, we have used the querySelector()function to assign the html elements (p1 and c1) to the variables parent and child.
Subsequently, we generated and incorporated an event, specifically the click event, into the divelement and the child button. Additionally, two functions that will assist us in determining the parent and child execution sequence order were constructed. It indicates that "child is invoked" will be printed if the child event is called first, and "parent is invoked" will be printed otherwise.
Thus, when the button is clicked, it will first print "child is invoked" which means that the function within the child event handler executes first. Then it moves to the invocation of the div parent function.
The idea of event bubbling is what caused the sequence to occur. Thus, bubbling of events occurs in this manner.
Event Capturing
The idea of event capturing was first introduced by the Netscape Browser. In contrast to event bubbling, which involves an event moving from the outermost element to the target, event capturing involves the capture of an event. If not, event bubbling occurs, in which case the event moves from the target to the file's outermost element. Although event bubbling is necessary to manage the event flow, event capturing is rarely employed. Instead, it is done prior to event bubbling.
An example of event capturing is;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event Capturing</title>
</head>
<body>
<div id="p1">
<button id="c1">I am Child</button>
</div>
<script>
var parent = document.querySelector('#p1');
var child = document.querySelector('#c1');
parent.addEventListener('click', function(){
console.log("Parent is invoked");
},true);
child.addEventListener('click', function(){
console.log("Child is invoked");
});
</script>
</body>
</html>
Explanation;
The code mentioned above is built using JavaScript and HTML.
We have a div id with id = p1 in the HTML section. We have nested and made a button with id = c1 inside the div.
Before we move on to the JS code, we first used the querySelector() method to assign the html element, or the p1 id, to a variable parent. We then repeated this process with the c1 id, assigning it to a variable child.
Next, we've added a click event to the p1 div and the c1button. includes a feature that allows the relevant message to be printed on the console as well. This indicates that the console will display the message "Child is invoked" if the child event handler is called first and the message "Parent is invoked" if the parent event handler is called first.
In order to activate event capturing in the parent div, we have added a third argument to addEventListner () that is set to true.
The function that is tied to the parent divis executed first when we click on the button. Subsequently, event capturing causes the button's onclick() function to execute. Owing to event capture, the target element's event is run after the parent element's event has finished.
Top comments (0)