Custom events, also known as synthetic events, are created by developers in JavaScript to detect scenarios that are not built into existing API events. They are used to call a function when a given scenario occurs--one that is not built into the browser.
Custom events are created using the Event constructor similar to how you build an object. For example, const event = new Event('build'); creates a custom event called "build." Then, you would add the event listener using addEventListener and finally trigger the event using elem.dispatchEvent(event);
Custom events are used when the available JavaScript events do not property describe what is going on in a script. Some examples I found were when a user login fails and we need to document the details of the failure or triggering an event when a user sends a message in a chat application. These are events that are not covered by the existing API, and therefore custom events are necessary.
Custom events are important to learn about and understand because events are everywhere in a web app. The entire user experience of using a website is basically a series of events. When existing events do not suffice, custom events are necessary.