Introduction
Two very common terminologies used for event flow in JavaScript are Event Bubbling and Event Capturing.
These are two important ways in which an event is propagated in the HTML DOM API when both elements register a handle for an event and the event occurs in an element nested in another element. The order in which an event is received by the elements is determined by the mode of event propagation. Read on to know the use of Event Bubbling and Event Capturing in JavaScript and why these are required in web page development.
Check out our free courses to get an edge over the competition.
Key takeaways
- Explaining the terms event, event flow, event handlers and event listeners
- Event Bubbling and Event Capturing in JavaScript
- Utility of Event Bubbling and Event Capturing in JavaScript
Events and event flow
The interaction of HTML web pages with JavaScript is mediated by events that occur when the page is manipulated by the user or the browser. The loading of a page, the user clicking a button, closing a window, are all examples of events.
The order in which the events are received on the web page is termed as event flow. The process of event flow is completed in 3 steps – event capturing (intercepting the event), event targeting (target gets the event) and event bubbling (response to the event).
Check out upGrad’s Advanced Certification in Cyber Security
Event Handlers and Event Listeners in JavaScript
Event Handler is a JavaScript code that is written inside the HTML tags instead of inside the <script> tags. Event Handlers execute JavaScript when an event happens such as pressing a button. The basic syntax is: name_of_handler=”JavaScript code here”
<a href=”https://www.google.com” onClick=”alert(‘hello!”)”>Goolge</a>
A procedure that awaits the occurrence of an event is an Event Listener. JavaScript has an in-built function, the addEventListener(), that receives the event to listen to, and calls a second argument when the said event is fired. The syntax is: element.addEventListener(event, listener);
Explore our Popular Software Engineering Courses
Check out upGrad’s Advanced Certification in Cloud Computing
Event Bubbling in JavaScript
Event Bubbling is a common terminology that is encountered while developing a web page or a web application using JavaScript. Event bubbling is a stage in the process of event flow when the event begins at the most specific element or the most deeply nested node in the DOM and subsequently flows upwards towards the node which is least specific, that is, the document.
<!DOCTYPE HTML>
<html>
<head>
<title>……</title>
</head>
<body>
<div id=”demo”> Press here.</div>
</body>
</html>
On clicking the element <div>, the event ‘click’ takes place in the following order:
- <div>
- <body>
- <html>
- Document
The event ‘click’ fires the element <div>. Each node is subsequently fired along the DOM tree, upwards, until the object document is reached.
Read: Full stack Project Ideas and Topics
Event Capturing in JavaScript
Event Capturing is an alternative model in event flow that was first introduced by Netscape Browser. As stated by this model, an event is received first by the least specific node and the most specific node or the most deeply nested element receives the event last. In this model, an event is intercepted before it reaches the actual target. However, unlike Event Bubbling, modern browsers lack support for this model and thus, Event Capturing can be used only in particular circumstances.
Referring to the example stated in the previous section, clicking the element <div> fires the event ‘click’ in the following order:
- Document
- <body>
- <html>
- <div>
What happens in the Event Capturing Phase?
In the event capturing phase, the capturer listeners whose value is registered as “true”, are called. It is written in the following way:
el.addEventListener(‘Click’, listener, true)
Here an event is captured because the value of the listener is registered as “true”. In case there is no value, the default value is “false” with the outcome that the event does not get captured. Hence in this phase, only events with true value get called and are captured. In the subsequent target phase, all listeners that are registered are called, irrespective of whether their value is registered as true or false.
Explore Our Software Development Free Courses
DOM event flow in JavaScript
The DOM Level 2 specifies three stages to the model of event flow:
- Event Capturing Phase
- At the target
- Event Bubbling Phase
If there is an opportunity of intercepting the event, Event Capturing occurs first. This is followed by the actual target getting the event. Eventually, at the Event Bubbling Phase, The final response to the event takes place. Referring to the example stated in the previous section, clicking the element <div> fires the event ‘click’ in the order illustrated in the diagram above.
Read: Full Stack Developer Salary in India
Utility of Event Bubbling and Event Capturing in JavaScript
In the Event Bubbling Phase, only the events having flag value “false” (non-capturers) are called. Event Bubbling and Event Capturing are important aspects of DOM.
el.addEventListener(‘Click’, listener, false) // listener doesn’t capture
el.addEventListener(‘Click’, listener) // listener doesn’t capture
The above code exemplifies how the bubbling and the capturing phases work. Every event does not reach the target. Some events are not bubbled up and stop post the target phase. The bubbling event is not applicable in all kinds of events and the listener should have the Boolean property “.bubble” of the object of the event besides possessing some other properties such as – e.target (to reference the target of the event) and e.eventPhase (current listeners register on this mode).
In-Demand Software Development Skills
Conclusion
The event flow in JavaScript has three important phases – Event Capturing phase, target phase and Event Bubbling Phase. Event Capturing is the first to occur, where the events are intercepted if necessary. This is followed by the event reaching the actual target and the final phase is bubbling, when the ultimate response to an event takes place. Thus, it can be appropriately concluded that Event Bubbling and Event Capturing in JavaScript are the foundations on which event handler and event delegation are dependent.
If you’re interested to learn more about full stack, check out upGrad & IIIT-B’s PG Diploma in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.
![Full Stack Developer Salary in India in 2024 [For Freshers & Experienced]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2019%2F10%2FBlog_FI_Nov_Full-Stack-Developer-Salary.png&w=3840&q=75)
![SQL Developer Salary in India 2024 [For Freshers & Experienced]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F05%2F477.png&w=3840&q=75)
![Library Management System Project in Java [Comprehensive Guide]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F08%2F769.png&w=3840&q=75)
![Bitwise Operators in C [With Coding Examples]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F10%2F1252.png&w=3840&q=75)
![ReactJS Developer Salary in India in 2024 [For Freshers & Experienced]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F05%2F478.png&w=3840&q=75)
![Password Validation in JavaScript [Step by Step Setup Explained]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2019%2F07%2FBlog_FI_July_upGrads-Knowledge-base.png&w=3840&q=75)
