0 ratings0% found this document useful (0 votes)
56 views17 pagesAbout Javascript Events
Events in Javascripts
Uploaded by
amadeus_x64Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0 ratings0% found this document useful (0 votes)
56 views17 pagesAbout Javascript Events
Events in Javascripts
Uploaded by
amadeus_x64Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
1112128, [Link] Custom events in JavaScript A complete guide - LogRocket Blog
aR eae)
Custom events in JavaScript: A
(oxeTuay ol (come Ui (o (=)
| Pee
James is a student software developer at Oppi
Table of contents a
How to create a custom event
in JavaScript
Using the event constructor
Using the customEvent
constructor
Dispatching custom events in
JavaScript
How do JavaScript custom
events work?
JavaScript drag-and-drop
How to use object
destructuring in JavaScript
Conclusion
Events are everywhere in a web application. From the DOMContentLoaded event,
which is triggered immediately when the browser is done loading and parsing
hitpsolog [Link]/custom-events-in-javascrpt-a-complete-guide/ wnt sans, 209M Custom events in JavaScript A complete guide - LogRocket Blog
HTML, to the unload event, which is triggered just before the user leaves your site,
the experience of using a web app is essentially just a series of events. For developers,
these events help us determine what just happened in an application, what a user's
state was at a specific time, and more.
Sometimes, the available JavaScript events don’t adequately or correctly describe the
state of an application. For example, when a user login fails and you want the parent
component or element to know about the failure, there is no login-failed event or
anything similar available to be dispatched.
Fortunately, there's a way to create JavaScript custom events for your application,
which is what we'll cover in this tutorial.
We'll go over the following in detail:
nps:ifsog [Link]-event-i-javaseripa-complete-qudel ant 1112128, 9:09AM Custom events in JavaScript A complete guide - LogRocket Blog
© Using the CustomEvent constructor
© Dispatching custom events in JavaScript
© How do JavaScript custom events work?
© JavaScript drag-and-drop
© How to use object destructuring in JavaScript
To follow along with this tutorial, you should have basic knowledge of:
© HTML and CSS
© JavaScript and ES6
© The DOM and DOM manipulation
Let's get started!
How to create a custom event in JavaScript
Custom events can be created in two ways:
1. Using the Event constructor
2. Using the CustomEvent constructor
Custom events can also be created using [Link] , but most of the
methods exposed by the object returned from the function have been deprecated.
Using the event constructor
A custom event can be created using the event constructor, like this:
const myEvent = new Event('myevent', {
bubbles: txue,
cancelable: true,
composed: false
»
nps:ifsog [Link]-event-i-javaseripa-complete-qudel anr sans, 209M Custom events in JavaScript A complete guide - LogRocket Blog
In the above snippet, we created an event, myevent , by passing the event name to
the Event constructor. Event names are case-insensitive, so myevent is the same
as myEvent and MyEvent , etc.
The event constructor also accepts an object that specifies some important properties
regarding the event.
bubbles
The bubbles property specifies whether the event should be propagated upward to
the parent element. Setting this to true means that if the event gets dispatched in a
child element, the parent element can listen on the event and perform an action based
on that. This is the behavior of most native DOM events, but for custom events, it is
setto false by default.
If you only want the event to be dispatched at a particular element, you can stop the
propagation of the event via [Link]() . This should be in the
callback that listens on the event. More on this later.
cancelable
As the name implies, cancelable specifies whether the event should be cancelable.
Native DOM events are cancelable by default, so you can call
[Link]() on them, which will prevent the default action of the
event. If the custom event has cancelable setto false , calling
[Link]() will not perform any action.
composed
The composed property specifies whether an event should bubble across from the
shadow DOM (created when using web components) to the real DOM. If bubbles
nps:ifoog [Link]-event-i-javaseripta-complete-gudel an 1112128, 9:09AM Custom events in JavaScript A complete guide - LogRocket Blog
isset to false , the value of this property won't matter because you're explicitly
telling the event not to bubble upward. However, if you want to dispatch a custom
event in a web component and listen on it on a parent element in the real DOM, then
the composed property needs to be set to true .
A drawback of using this method is that you can’t send data across to the listener.
However, in most applications, we would want to be able to send data across from
where the event is being dispatched to the listener. To do this, we can use the
CustomEvent controller
You can't also send data using native DOM events. Data can only be gotten from the
event's target.
Using the CustomEvent constructor
A custom event can be created using the CustomEvent constructor:
const myEvent = new CustomEvent("myevent", {
detail: {},
bubbles: true,
cancelable: true,
composed: false,
Dv:
As shown above, creating a custom event via the CustomEvent constructor is
similar to creating one using the Event constructor. The only difference is in the
object passed as the second parameter to the constructor.
‘When creating events with the Event constructor, we were limited by the fact that
we can't pass data through the event to the listener. Here, any data that needs to be
passed to the listener can be passed in the detail property, which is created when
initializing the event.
nps:ifoog [Link]-event-i-javaseripta-complete-gudel si7 1112128, [Link] Custom events in JavaScript A complete guide - LogRocket Blog
Dispatching custom events in JavaScript
After creating the events, you need to be able to dispatch them. Events can be
dispatched to any object that extends EventTarget , and they include all HTML
elements, the document, the window, etc.
You can dispatch custom events like so:
const myEvent = new CustomEvent("myevent", £
detail: {t,
bubbles: true,
cancelable: true,
composed: false,
vn:
document..querySelector("ssomeElement") .dispatchEvent (myEvent) ;
To listen for the custom event, add an event listener to the element you want to listen
on, just as you would with native DOM events.
document .querySelector("s#tsomeElement") .addEventListener("myevent", (
[Link]("I'm listening on a custom event");
ni
How do JavaScript custom events work?
To show how to use custom events in a JavaScript application, we'll build a simple
app that allows users to add a profile and automatically get a profile card.
Here is what the page will look like when we're done:
hitpsolog [Link]/custom-events-in-javascrpt-a-complete-guide/ 1112128, 9:09AM Custom events in JavaScript A complete guide - LogRocket Blog
Profile Card
ter Profile Detail
“ag
Sane Ka eet
g the UI
Create a folder, name it anything you like, and create an [Link] file in the
folder.
Add the following to [Link] :
Profile Card