What are DOM Custom Events?
DOM custom events are what they sound like, they are events written outside of the built-in JavaScript events.
How To Create Custom Events
There are two methods of creating custom events.
-
The first method is the Event constructor. The syntax is: const myEvent = new CustomEvent("myevent", { detail: {}, bubbles: true, cancelable: true, composed: false, });
-
The second is using the CustomEvent constructor. The syntax is: const myEvent = new CustomEvent("myevent", { detail: {}, bubbles: true, cancelable: true, composed: false, }); The main difference between the two methods is that when using the CustomEvent constructor you can pass details of the event to the listener.
-
According to blog.logrocket.com, there is a third method (document.createEvent) but they say that most of the methods exposed by the objuect returned from this function have been deprecated.
Why Use Custom Events?
Custom events are used when built-in events can't adequately, or completely describe the state of an application. An example would be if a login fails there is no built-in login-failed event. So if you want to the parent to know about the failure you would need to create a custom event.
Summary
Custom events are just one more tool in the already dizzying arsenal of tools available through JavaScript to create interactive web applications, and worthy of more investigation.