These events are core events defined in HTML they give basic functionality like onchange fires when their is a change in input, textarea or select element of HTML but what will you do if you want to get notified (hide/show/update) some parts of your page when user type “why so serious!” in textarea field or let’s say you want to update multiple elements in your HTML page. Javascript custom events comes handy in these cases.

But the best use case I personally see about events is that by using events we can create modular applications(mobile/web) so that at any time we can make changes to our apps without worrying too much about code breakage.

Creating javascript custom events is simple, just use CustomEvent interface provided by javascript give event name (used later to listen so it should be unique for your app) and detail you want to pass to the listeners of this event.

var myEvent = new CustomEvent("customEventName", {

detail: { data1: "any value", name: "any value you want to give", randomNumber: Math.round(Math.random() * 200)},

bubbles: true,
cancelable: true});

You can include any valid data types in detail object. If bubbles is true, events will bubble to ancestors of the element which fired the event or say ancestor of the element which fired the event can listen for this event default value of the bubbles is true. Events are only fired by HTML DOM elements simple syntax is: element.dispatchEvent(“yourEventName”)

See all methods and properties of CustomEvent interface.

document.body.dispatchEvent(myEvent);

In this case we are dispatching event on document.body element. You call dispatchEvent on the element that you want to act as your event target (aka the element that actually fires the event) like if you want to dispatch event on an element with id ‘msgbox’ you will write: document.getElementById("msgbox").dispatchEvent(myEvent);

Now it’s time to connect the other part of the story, event listeners. Just remeber few things about custom events:

(1) You have to put event listener code before the event dispatch code.

(2) You can’t attach event listener to the successor/child of the element which dispatch that event. See the plunker demo for better understadning.

(3) As Custom events extent Event object so all the Event properties are their to use, benefit of custom events is that we can specify our own properties or can override default events behaviour.

document.body.addEventListener(“customEventName”, eventHandler, false);

function eventHandler(e) { alert("Event detail is: " + e.detail); }

Demo