4. DOM Events
• HTML DOM events allow JavaScript to register
different event handlers on elements in an HTML
document.
• Events are normally used in combination with
functions, and the function will not be executed
before the event occurs (such as when a user clicks a
button).
5. Behavior DOM of Events
• In Lightning Web Components, we can create and dispatch custom
events. Events are utilized to communicate up the component
containment hierarchy.
• Event Target Interface is implemented in LWC to dispatch, listen
to, and handle events.
• The elements involved in the DOM Events System are:
• An Event Name, known as Type.
• Configuration in order to initialize an event.
• A JavaScript Object that emits the event.
6. Types of Events
• Parent – to – Child Communtication
• Child-to-Parent Communication
• Communication Between Unrelated Components
• Lightning Message Service
7. Parent-Child scenario
To pass the details from a parent-to-child
component, public methods or public properties can be
used.
An API Decorator should be used to expose the child
component properties/methods available to the parent
component.
8. Child-Parent scenario
Custom Event can be used to communicate from child component to
parent component.
CustomEvent() constructor can be used to create a custom event. Custom
Event Name and properties should be passed into the constructor.
The dispatchEvent() method is used to dispatch an event, and the code
looks like this:
this.dispatchEvent(newcustomEvent(eventName, props);
EventTarget.dispatchEvent()
To handle an Event declaratively with a HTML markup, add “on” as a prefix
keyword for the event name in the parent component when calling the
child component for the declarative event listener.
9. Unrelated Component scenario
Communication between components which aren’t in the
same DOM tree (unrelated components) can be achieved
by using the publish-subscribe model. Essentially, one
component subscribes to an event, whereas another
component publishes the event and handles it in the same
scope.
10. Lightning Message Service scenario
Communication between components which aren’t in the
same DOM tree (unrelated components) can be achieved
by using the publish-subscribe model. Essentially, one
component subscribes to an event, whereas another
component publishes the event and handles it in the same
scope.
