Home
Blog
Full Stack Development
Event Bubbling and Event Capturing in Javascript Explained: How to Utilize?

Event Bubbling and Event Capturing in Javascript Explained: How to Utilize?

Updated on 11 November, 2024

6.55K+ views

• 7 min read

Arjun Mathur

Table of Contents

Introduction
Key takeaways
Events and event flow
Event Handlers and Event Listeners in JavaScript
Event Bubbling in JavaScript
Event Capturing in JavaScript
DOM event flow in JavaScript
Utility of Event Bubbling and Event Capturing in JavaScript
Conclusion

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

Master of Science in Computer Science from LJMU & IIITB	Caltech CTME Cybersecurity Certificate Program
Full Stack Development Bootcamp	PG Program in Blockchain
Executive PG Program in Full Stack Development
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.

Source

<!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.

Source

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

Fundamentals of Cloud Computing	JavaScript Basics from the scratch	Data Structures and Algorithms
Blockchain Technology	React for Beginners	Core Java Basics
Java	Node.js for Beginners	Advanced JavaScript

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

Source

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

JavaScript Courses	Core Java Courses	Data Structures Courses
Node.js Courses	SQL Courses	Full stack development Courses
NFT Courses	DevOps Courses	Big Data Courses
React.js Courses	Cyber Security Courses	Cloud Computing Courses
Database Design Courses	Python Courses	Cryptocurrency Courses

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.

Learn JavaScript Tutorial Concepts

JavaScript Hello World	JavaScript Let	JavaScript Callbacks
JavaScript Arrays	JavaScript Loops	JavaScript Objects
DOM Model in JavaScript	JavaScript Promises	JavaScript Closure
JavaScript This Keyword	View all JavaScript Tutorial Concepts

Frequently Asked Questions (FAQs)

1. How is Javascript different from Java?

The primary difference between Java and Javascript is that Java is an Object-Oriented Programming language, while JavaScript is an Object-Oriented Programming (OOP) scripting language. Java is used to develop apps that operate on a virtual computer or in a web browser. Developers utilize Javascript, which is only capable of running in a browser. JavaScript code is simply text and does not need to be compiled. JavaScript is an object-oriented, lightweight interpreted programming language that lets you add dynamism to somewhat static HTML websites. Opera, Mozilla Firefox, and other web browsers support the language's overall core.

2. What are the advantages of Javascript?

There are many advantages of Javascript. Firstly, JavaScript is always run on the client to conserve bandwidth and speed up the execution process, regardless of where it is hosted. JavaScript is particularly fast since it can be run directly in the client-side browser. Unless external resources are required, network requests to a backend server have no effect on JavaScript. It is the scripting language that can be used in a variety of applications and works well with other languages. The order to sustain all contemporary browsers and generate identical results is JavaScript's significant benefit. JavaScript is used all across the internet.

3. What are the disadvantages of Javascript?

Like any other language, Javascript has its own set of drawbacks. Large applications written in Javascript may be challenging to create. This is especially true for more significant front-end projects. The quantity of tools that must be figured together to create an environment for such a project makes setup a lengthy procedure. The biggest issue or drawback with JavaScript is that the code is constantly exposed to everyone who has access to the internet. Regardless of how fast JavaScript interprets, the JavaScript Document Object Model (DOM) is sluggish and can never render as quickly as HTML. If a JavaScript problem occurs, the entire website may stop working. JavaScript mistakes are tolerated quite well by browsers. Various browsers interpret JavaScript in different ways. This makes cross-browser programming a little more challenging to read and develop.

RELATED PROGRAMS