DOM Custom Events
DOM custom events utilize the JavaScript custom event constructor in conjunction with DOM elements to trigger changes to an active webpage or to help in the debug process.
These events can be customized to be triggered in numerous ways such as: when the website loads/unloads, after a mouse click is let go over the element, while a keyboard key is pressed, etc.
The custom event constructor is supported in all mainstream modern browsers other than Internet Explorer; for Internet Explorer “document.createEvent()” is used in place of “CustomEvent()”.
How to Create Custom Events
Custom events are created by first assigning a variable name to the Event constructor. The next step is to add an event listener to the element that is to be impacted by the custom event.
The event listener will react when the appropriate trigger is set off via the designated trigger type, such as on click. The final step is to dispatch the event to the appropriate element(s).
Why Use DOM Custom Events?
DOM custom events are used because of the interconnectivity between DOM elements and how they can be utilized to transfer changes through DOM elements. Different properties are utilized to transfer event data through the DOM such as: bubbles, cancelable, and composed.
The bubbles property can be set to either true or false; when true, the events details are shared upward through the parent elements. The composed property moves downward through the DOM, ending at the matching element.
Summary
Events are powerful JavaScript commands that when used correctly can greatly increase the functionality of a website.
Events can be triggered in many ways and at different times during the loading/unloading process of the webpage. To maximize resources, it’s important to know how to best work with the events properties.