DOM Custom Events: A CustomEvent is an interface that represents events that are initialized by an application for any purpose needed. The Custom evenet has a instance property, CustomEvent.detail which returns any data that is passed in when activating the event. Its instance method CustomEvent.initCustomEvent will initilzise a Custom Event object, if it has already been dispatched then the method does nothing. Custom Events are compatible with most browsers on the web.
How to Create Custom Events: To Create events, you will need a variable such as "event" for example along with the equal sigh with "new Event" with a parameter. The event can be dispatched with EventTarget.dispatchEvent(). You can add to the CustomEvent interface that already exist, with a detail property that can be used to pass through custom data. Their is also an old fashioned way with such as document.createEvent.
Why DOM Custom Events are used: Custom Event work as regular ones do but they manage to go out of the limit of regular events. A custom Event would be created when a regular event does not accurately reflect an action that you would like to track. This allows you to define your event types assign them to elements that can be triggered programmatically.
Overall, Custom events allow a completely different way to think about events in javascript. Instead of focusing on the action of the element the custom Event somewhat puts a spotlight on an element that is being acted upon. The benefits of custom events include the behavior of the target element that can easily be triggered by different elements while using the same code, can be triggered across multiple and similar target elements all at once and it is clearly more associated with a target element in the code, allowing code to be easier to read and maintain.