What are custom events in JavaScript?


Custom events are the events that allow you to decouple the code you want to run after a specific piece of code runs. There are various in-built events present in JavaScript such as on-click events and many more but what if we want to create a custom event that will trigger whenever we want and do whatever we want to do then the custom events come into the picture.

We can basically add custom events by adding an HTML event to an element of your web page. We can add a custom event either by using the Event constructor or by using the CustomEvent interface. Both of these produce the same custom event, but just the difference is that the CustomEvent interface allows you to add more functionality to the custom event.

In this tutorial, we will look at what are the custom events in JavaScript. Now we are going to create a custom event using both the methods as given below −

Using the Event Constructor

In this method, we first create a new event using an event constructor and then listen to it using an event listener, and at last, we trigger it using the dispatchEvent() method.

Syntax

Following is the syntax for a custom event using the event constructor in JavaScript −

const first = new Event("custom",{
   bubbles: true,
   cancelable: true,
});
document.addEventListener("custom", () => {
   document.write("The custom event was triggered")
});
document.dispatchEvent(first);

Example

In the below example, we create a custom event named "event" using the Event constructor.

<!Doctype html> <html> <body> <h2 id="custom">Custom event created using the Event Constructor </h2> <script> let event = new Event("first", {bubbles: true}); document.addEventListener("first", function(event) { alert("Hello from " + event.target.tagName); }); custom.dispatchEvent(event); </script> </body> </html>

A window will pop up which shows the text “Hello from” + the name of the tag whose data we want to print.

After clicking the OK button, it will show the result – "Custom event created using the Event Constructor".

Using the Event Custom Interface

In this method also we first create a new event using event constructor and then listen to it using an event listener and at last we trigger it using dispatchEvent() method but here we can also add some conditions in the event listeners to make custom event more customizable.

Syntax

Following is the syntax to create a custom event using the event custom interface In JavaScript −

const first = new Event("custom",{
   bubbles: true,
   cancelable: true,
});
document.addEventListener("custom", () => {
   detail: { name: "John" }});
document.dispatchEvent(first);

Note → bubbles: true/false − if true, then the event bubbles.

cancelable − true/false − if true, then the “default action” may be prevented. Later we’ll see what it means for custom events.

By default, both are false: {bubbles: false, cancelable: false}.

Example

We can use the below code to create custom events using the Event custom interface.

<!Doctype html> <html> <body> <h2 id="custom"> Custom events are created using the Event custom interface in JavaScript </h2> <script> // additional details come with the event to the handler custom.addEventListener("first", function(event) { alert(event.detail.name); }); custom.dispatchEvent(new CustomEvent("first", { detail: { name: "Prince" } })); </script> </body> </html>

A window will popup which shows the detail we mentioned in the dispatch event

After clicking the OK button, it will show the result- "Custom events are created using the Event custom interface in JavaScript".

So from this tutorial, we concluded that we can create various custom events which can run after our code runs so that it can provide more clarification, design, and explanation in our application.

Updated on: 18-Oct-2022

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements