CustomEvent & dispatchEvent vs. Event & dispatchEvent vs. createEvent, initEvent & dispatchEvent vs. createEventObject & fireEvent

[jasdeepkhalsa]

There are many ways to trigger events, and depending on what the browser actually supports, this can become a complex area.

I'm very surprised Modernizr does not have any feature detection for any event dispatching methods whatsoever, except CustomEvent.

In general, the following are all valid ways to dispatch events:

CustomEvent & dispatchEvent - Limited browsers (https://caniuse.com/#feat=custom-elementsv1)

var event = new CustomEvent('build', { detail: elem.dataset.time });
elem.dispatchEvent(event);

Event & dispatchEvent - Modern browsers (not sure which ones)

var event = new Event('build');
elem.dispatchEvent(event);

createEvent, initEvent & dispatchEvent - >= IE9 & modern browsers (not sure which ones)

var event = document.createEvent('HTMLEvents');
event.initEvent('build', true, false);
elem.dispatchEvent(event);

createEventObject & fireEvent - <= IE8

var event = document.createEventObject();
elem.fireEvent('onbuild', event);

Example cross-browser implementation for dispatching events

Here is an example of an implementation I've written to help trigger events in a cross-browser way - by combining ideas I've seen across the Internet.

However, it's not been tested thoroughly or anything so please take it with a pinch of salt, but it should hopefully demonstrate how complex this problem really is without a clever way to detect features:

function triggerEvent(elem, eventType) {
   const noop = () => {}

   if ('createEvent' in document) {
        // modern browsers, >= IE9
        const evt = document.createEvent('HTMLEvents') || new Event(eventType);
        evt.initEvent ? evt.initEvent(eventType, true, false) : noop();
        elem.dispatchEvent(evt);
        return;
    }
    else if ('fireEvent' in document) {
        // <= IE8
        const evt = document.createEventObject();
        evt.eventType = eventType;
        elem.fireEvent(`on${evt.eventType}`, evt);
        return;
    }
}

I feel like as a developer community we can come up with some clever ways to detect these various browser APIs used for triggering events and add them into Modernizr.

[rejas]

hi @jhbsk do you want to create a preliminary PR to get the discussion going?

[jasdeepkhalsa]

Happy to have a stab at it @rejas !