Event Bubbleup

Dr. RAMA ABIRAMI

ASSOCIATE PROFESSOR/ISE,
DSATM

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

 Event Bubbleup
• While I was working on a pop up functionality
i.e.,
• when click on a product it should display a pop
up and pop up should be closed by clicking on
background which is shown in the following
figure

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

09/23/2023 Dr. Rama Abirami K/ISE,DSATM
For that I just defined onClick method which is
responsible for closing popup for popUpContainer
(i.e., popup background). But What I observed is
that popupContainers’ onClick method is not only
called when I clicked on background but also
called wherever I clicked in the popup container.
Then I was like what the hell is going on. cool :)
After a while, I got to know that it is happening
because of Event bubbling.
09/23/2023 Dr. Rama Abirami K/ISE,DSATM
• Event Bubbling and Event Capturing are two concepts
which we encounter during event flow. Before dive into
our actual topic, let’s talk about few concepts….
• Event Target :
• Event Target is the node at which an event is actually
originated from.
• Event Propagation :
• Event propagation is nothing but how events flow
through the DOM tree to reach its target. We can also
call it as Event Flow.
09/23/2023 Dr. Rama Abirami K/ISE,DSATM
• Let’s see it in detail ….
• <div className = 'grand-parent'>
<div className = 'parent'>
<button className = 'child'>
Click me
</button>
</div>
</div>See the above example code, when we click on button not
only buttons’ onClick called but also onClick handlers of every node
like grand-parent and parent div and up to window node which are
registered for that event type are called. This is because of event
propagation.
• The event propagation is bidirectional i.e., flows from window to event
target and vice versa.

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

• During event propagation, event handlers can access some of
the properties of event such as :
• event.target : it references event target node i.e., node where
actually that event is originated
• event.currentTarget : it references to that current node on
which current handler is registerd
• event.eventPhase : it is an integer value that represent the
phase of propagation that is currently being evaluated
• Event propagation proceeds in two phases. They are
• Event Bubbling
• Event Capturing

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

09/23/2023 Dr. Rama Abirami K/ISE,DSATM
 Event Bubbling
• Event bubbling is a process of event flows
from event target to window. So, in event
bubbling, if an event is originated at a node
then handlers of that event type of ancestor
nodes are also called. At present, all browsers
follow event bubbling by default.
• Let’s see how it works in code…

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

• import React from "react"; • console.log("Child Handler");
import "./App.css";export default class }render() {
App extends React.Component { return (
constructor() { <div className="grand-parent"
super(); onClick={this.grandParentOnClickHandler
['grandParentOnClickHandler', }>
'parentOnClickHandler', <div className="parent"
'childOnClickHandler' onClick={this.parentOnClickHandler}>
].forEach(handler => { <button
this[handler] = this[handler].bind(this); onClick={this.childOnClickHandler}>
}); Click me
}grandParentOnClickHandler() { </button>
console.log("Grand Parent Handler"); </div>
}parentOnClickHandler() { </div>
console.log("Parent Handler"); );
}childOnClickHandler() { }
}

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

• In the above code, for each element(div , button), we
can find corresponding on click handlers defined.
• Let’s see how it will look in browser and what will
happen if button is clicked

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

• Here we can see event bubbling i.e., When I
clicked the button Click me, it first called Child
Handler, then Parent Handler and then Grand
Parent Handler. We can verify this using
console which is shown in above. So, handlers
of every ancestor node which are registered on
click event are called during bubbling.
• Now, a question is raised in all our minds right
i.e.,
09/23/2023 Dr. Rama Abirami K/ISE,DSATM
 How can we stop bubbling ….?
• Don’t worry ! It is not a great deal. • parentOnClickHandler() {
Let’s see how we can stop it console.log("Parent Handler");
• import React from "react"; }childOnClickHandler(event) {
import "./App.css";export default console.log("Child Handler");
class App extends React.Component { event.stopPropagation();
constructor() { }render() {
super(); return (
['grandParentOnClickHandler', <div className="grand-parent"
'parentOnClickHandler', onClick={this.grandParentOnClickHandle
'childOnClickHandler' r}>
].forEach(handler => { <div className="parent"
this[handler] = onClick={this.parentOnClickHandler}>
this[handler].bind(this); <button
}); onClick={this.childOnClickHandler}>Click
}grandParentOnClickHandler() { me</button>
• console.log("Grand Parent Handler"); </div>
} </div>
);
}
}
09/23/2023 Dr. Rama Abirami K/ISE,DSATM
• In the above code, we just added event.stopPropagation() to
the child on click handler.
• event.stopPropagation() is a function which is defined in
event object which is used to stop event propagation. So,
wherever we want to stop event propagation , we just need to
invoke this method.
• Let’s see console output ,

Now, when we click on button, it will just call Child handler because we
09/23/2023
stopped event propagation in child handler itself.
Dr. Rama Abirami K/ISE,DSATM
• I assume everything is clear up to now . Let’s start with
the other. Cool….
• Event Capturing :
• Event capturing is quite opposite to event bubbling i.e.,
in event capturing event propagation starts its flow
from window to event target where as in event bubbling
it’s reverse. By default, event capturing cannot be seen
in any of modern browsers. But we can achieve this
manually in react.
• Let’s see how it happens and how we achieved it in react

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

• import React from "react"; • console.log("Child Handler");
import "./App.css";export default class }render() {
App extends React.Component { return (
constructor() { <div className="grand-parent"
onClickCapture =
super();
{this.grandParentOnClickHandler}>
['grandParentOnClickHandler',
<div className="parent"
'parentOnClickHandler', onClickCapture={this.parentOnClickHandler}
'childOnClickHandler' >
].forEach(handler => { <button onClick={this.childOnClickHandler}>
this[handler] = this[handler].bind(this); Click me
}); </button>
}grandParentOnClickHandler() { </div>
console.log("Grand Parent Handler"); </div>
}parentOnClickHandler() { );
console.log("Parent Handler"); }
}childOnClickHandler() { }

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

 In the above code, we just replaced onClick() with onClickCapture() for
button ancestors. See console output in the above image which shows
that Grand Parent Handler called first, then Parent Handler and at
last Child Handler where actually click event is originated (event
target).

Conclusion:
Event Delegation is implemented using Event Bubbling and Event Capturing.

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

 Reference links
• https://
www.youtube.com/watch?v=aVSf0b1jVKk
• https://
www.youtube.com/watch?v=G6SxEBVOGfA

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

 Integration of CSS Module

Dr.RAMA ABIRAMI K

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

• CSS Modules can solve these errors likely to
appear, especially as your application grows.
They ultimately allow us to use the same class
name in multiple files without selector and rule
errors by scoping class names locally by default.
• A CSS Module is simply a .css file, where classes
act similarly to local variables in Javascript. It is
a tool that makes every class unique by
including a hash in their name.
09/23/2023 Dr. Rama Abirami K/ISE,DSATM
• Creating a CSS Module
• If you are using create-react-app, making CSS
Module for a component is relatively easy.
Follow the typical naming convention for a css
file, but insert module before .css, like
so: [name].module.css
• To see an example, here is
my Task.module.css file within a simple to-do
app:
09/23/2023 Dr. Rama Abirami K/ISE,DSATM
09/23/2023 Dr. Rama Abirami K/ISE,DSATM
• If I have another box class in a different
component that has a different color, those
rules will not collide since modules apply local
scope.
• To import a CSS Module into the
corresponding component, import the css
modules stylesheet as styles or [name]Styles:

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

09/23/2023 Dr. Rama Abirami K/ISE,DSATM
• In JSX, use the defined CSS class as a
className prop like so:

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

• From here, you can add as many other CSS modules you’d
like, just remember to import each as a different name.
• With CSS Modules, you can create portable, reusable CSS
files and no longer need to be concerned with selector name
collisions or rules impacting another component’s styles.
• Often when faced with the styling decision for React apps,
developers are torn between using CSS Modules or a CSS-in-
JS (tool for abstracting the CSS to the component level)
library like styled-components, Emotion, or styled-jsx. As
CSS-in-JS libraries are becoming more widely used and
mainstream for describing styles declaratively, I’ve noticed
that many still believe CSS Modules are the way to go,
especially for their modular and reusable qualities that make
the styling experience that much more seamless.

09/23/2023 Dr. Rama Abirami K/ISE,DSATM

 References
• https://www.youtube.com/watch?v=ZawAwPY
rxGA
• https://medium.com/@ralph1786/using-css-
modules-in-react-app-c2079eadbb87

09/23/2023 Dr. Rama Abirami K/ISE,DSATM