4R DOM Custom Events

What are DOM Custom Events?

Custom events are events that we create ourselves when we want to separate codes that fire and listen for events. Custom events can be very helpful in changing things without breaking the code.

How to create Custom Events?

To create custom events we use a function called CustomEvent(). The CustomEvent() has 2 parameters:

• The eventType is a string and represents the name of event
• The options is an object and it has a detail property that tells what the event is about

After the event was created we attach it to DOM using dispatchEvent method.

Why DOM Custom Events are used?

We use custom events when we want to separate the code after completeing another piece of code. For example we can seperate event listeners in a separate script and have many event listeners to the same custom event.

Summary

Thus, custom events are a very helpful tool that let your page be more interactive. The difference between standard events and custom events is that regular events only have 9 default labels and cannot be renamed while custom events can be named anything and are easier to setup.