Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event
The event propagation mode determines in which order the elements receive the event.
With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements
With capturing, the event is first captured by the outermost element and propagated to the inner elements.
The three event flow phase are illustrated in the following diagram from the W3C UIEvents specification.
As shown above in the image
notifyParentComponent
and notifyChildComponent
.import { LightningElement } from 'lwc';
export default class NotifyParentComponent extends LightningElement {
showNotification = false;
showHandler() {
this.showNotification = true;
}
}
<template>
<lightning-card title="Event with Bubbling" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<div class="parent-section" onshow={showHandler}>
<p>I am parent component</p>
<template if:true={showNotification}>
<div class="notificationbox">
<span>Notification from Child. Event bubbled successfully!</span>
</div>
</template>
<c-notify-child-component></c-notify-child-component>
</div>
</div>
</lightning-card>
</template>
.notificationbox {
background-color: #43a047;
color: #fff;
display: flex;
padding: 16px 16px;
flex-grow: 1;
flex-wrap: wrap;
align-items: center;
border-radius: 4px;
flex-grow: initial;
max-width: 80%;
margin-bottom: 1rem;
}
.parent-section {
border: 5px solid black;
padding: 2rem;
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
notifyParentComponent.html
we have created a lightning-card
to give our component better looks and feellightning-card
we have a div
with parent-section
class in which we are listening to the custsom event onshow
that is call ing the showHandler
parent-section
, we have two main part one is notification box that is only visibile when showNotification
prooperty become true and second part is the child component c-notify-child-component
notifyParentComponent.js
, we have one local property showNotification
that is initialized with false
and showHandler
method that will update the showNotification
valueimport { LightningElement } from 'lwc';
export default class NotifyChildComponent extends LightningElement {
showChildNotification = false;
childHandler() {
this.showChildNotification = true;
}
showNotifyParentHandler(event) {
event.preventDefault();
const selectEvent = new CustomEvent('show', {
bubbles: true
});
this.dispatchEvent(selectEvent);
}
}
<template>
<div class="child-section">
<p>I am child component</p>
<template if:true={showChildNotification}>
<div class="notificationbox">
<span>Notification in Child component. Event bubbled till parent
element in same component</span>
</div>
</template>
<div class="content" onclick={childHandler}>
<button class="btn" onclick={showNotifyParentHandler}>
Click me to send notification to parent component using event bubbling
</button>
</div>
</div>
</template>
.notificationbox {
background-color: #ffa000;
color: #fff;
display: flex;
padding: 16px 16px;
flex-grow: 1;
flex-wrap: wrap;
align-items: center;
border-radius: 4px;
flex-grow: initial;
max-width: 80%;
margin-bottom: 1rem;
}
.child-section {
border: 5px solid red;
padding: 2rem;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
background-color: #01344e;
}
.content {
display: contents;
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
notifyChildComponent.html
, we have notificationbox that will be visible only when the value of the showChildNotification
property become truechildhandler
. In between content template we have a button that too has onclick event which calls the showNotifyParentHandler
method.childhandler
and after that it will go to parent component and trigger it's showHandler
as well.After placing the component on the page, you will see the following output.