The blog provides the details on the Event Bubbling and Event Capturing in JavaScript. The JavaScript allows to invoke events based on the user action.
What is Event Bubbling in JavaScript ?
Let’s consider the below example where onClick event is captured and each HTML element when click performs a specific action.
The HTML Form contains <DIV> Tag , then <p> and then <button>.
When an event happens on an element, it executes the element event handlers on it, then on its parent, then traverse all the way to the ancestors which means the below hierarchy is being followed
When the user click the button
- then button onClick event is triggered
- then onClick event on the <DIV> tag is triggered
- then onClick event on the <Form> is triggered.
When the user click on the DIV
- then onClick event on the <DIV> tag is triggered
- then onClick event on the <Form> is triggered.
<html>
<head>
<title>
JavaScript Event Propagation Example
</title>
</head>
<body>
<form onclick="alert('Event Propagation -Form')">Click on Form
<div onclick="alert('Event Propagation - Div-> Form')">Click on DIV Tag
<p onclick="alert('Event Propagation - Paragaph -> Div-> Form')">
Click on Paragragh </p>
<button onclick = "alert('Event Propagation - Button -> Div -> Form')">
Click on Button </button>
</div>
<style>
body * {
margin: 15px;
border: 1px solid blue;
background-color :lightgrey;
}
</style>
</form>
</body>
</html>Explain event.target
The element that actually caused the event is called target element. Thus the mostly deeply nested element ( Button Click in our example) is accessible as event.target in JavaScript
event.target = is the target element that initiated / caused the event to trigger
this = is the current element that is running the event handler, accessible as event.CurrentTarget
How to Stop Event Bubbling in JavaScript ?
The Event Bubbling is the event that starts from the “target element” and traverse upwards to the ancestor element which could be html or document object or windows object.
When the handler considers that the event has been processed , then it stops the bubbling by calling the method event.stopPropagation()
<head> <title> JavaScript Event Stop Propagation Example </title> </head> <body> <button onclick="event.stopPropagation()">Click me</button> </body> </html>
When an element has multiple event handlers and one of the event has stopped bubbling by calling the method event.stopPropagation(), the other event handlers still excutes.
In such cases, we need to call the method event.stopImmediatePropagation() which stops the bubbling for all the event handlers associated with the element.
What is Event Capturing in JavaScript ?
The Event Capturing is opposite to the Event Bubbling in JavaScript. In Event Capturing is the process in which the event starts from the ancestor and traversed down to the element.
When the user click the button, then it traverses from
Form -> DIV -> Button
Syntax for Event Capturing
el.addEventListener(type, listener, useCapture)Parameters:
type: indicates the event type
listener: function call when the specified event type occurs
useCapture: true for capturing phase
What is Event Propagation in JavaScript ?
As per the Standard DOM Events, the event propagation can be classified into 3 phases
- Capturing Phase : Traverse event from ancestor to actual element
- Target Phase : Target element which caused the event
- Bubbling Phase: Traverse event from element to ancestor event
The event propagation flow phase are illustrated in the following diagram from W3C Standard DOM Events
One thought on “Event bubbling and Capturing in JavaScript”
Comments are closed.