Trigger then handle JavaScript events?

Question

How do I trigger then handle an event in vanilla JavaScript?

What I have tried:

var fireOffAnEvent = function () {
    // Dispatch the event.
    var custom_event; // The custom event that will be created

    if (document.createEvent) {
        custom_event = document.createEvent("HTMLEvents");
        custom_event.initEvent("custom", true, true);
    } else {
        custom_event = document.createEventObject();
        custom_event.eventType = "custom";
    }

    custom_event.eventMessage = "Hello events";

    document.createEvent ? document.dispatchEvent(custom_event) : document.fireEvent("on" + custom_event.eventType,
                                                                                        custom_event);
}
fireOffAnEvent()

And here is how I have tried to handle the events:

document.addEventListener("custom", function(e) {
    console.log(e.eventMessage);
}); // Nothing happened

document.addEventListener("HTMLEvents", function(e) {
    console.log(e.eventMessage);
}); // So tried ^, still nothing

Plnkr: http://run.plnkr.co/Zqcdoj3W5z5w4ZQu/

Answer 1

Try to fire your events after registering listeners. (put at the end of your code). Then events should be properly handled by them