Correct way to dispatch event in IE 11

Question

I have a problem with dispatching event in Internet Explorer 11. Currently, we have:

fireEvent for IE and

createEvent
initEvent
dispatchEvent

idiom for normal browsers.

The prorblem is that neither of these works in IE 11. Nor do the new way - using new Event() / new CustomEvent().

It looks like Microsoft deprecated their proprietary fireEvent (for IE 11) but did not offer support for correct dispatching.

PS. I believe i have read all topics here on SO related to the matter still can't find the working solution

Isn't this the kind of thing that jquery is for? To abstract all of the weirdness and non-working things out so that you can just call [.trigger()](https://api.jquery.com/trigger/) ....See also [this page](https://api.jquery.com/category/events/event-object/) — Lynn Crumbling, Mar 09 '17 at 22:24
@LynnCrumbling Looks promising, i'll try it when i'll be at work — Anatoly Yakimchuk, Mar 09 '17 at 22:35
@LynnCrumbling The solution you proposed works flawlessly! Thanks — Anatoly Yakimchuk, Mar 10 '17 at 09:15

Chris Barr · Answer 1 · 2020-07-12T20:02:47.863

Here's a fully working solution I based on this SO Answer: https://stackoverflow.com/a/49071358/79677

You can use it like this: SendBrowserAgnosticEvent(myElement, 'change') and it will return the created Event object

Here's the code in JavaScript

/** This allows us to dispatch browser events in old IE and newer browsers */
export var SendBrowserAgnosticEvent = function(elem, eventName) {
    //Needed for IE Support: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent#Browser_Compatibility
    //https://stackoverflow.com/a/49071358/79677
    var event;
    if (typeof(Event) === 'function') {
        event = new Event(eventName);
    } else {
        event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
    }
    elem.dispatchEvent(event);

    return event;
};

and here it is in TypeScript with full typings

/** This allows us to dispatch browser events in old IE and newer browsers */
export const SendBrowserAgnosticEvent = <T extends HTMLElement | Window>(elem: T, eventName: string): Event => {
    //Needed for IE Support: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent#Browser_Compatibility
    //https://stackoverflow.com/a/49071358/79677
    let event;
    if (typeof(Event) === 'function') {
        event = new Event(eventName);
    } else {
        event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
    }
    elem.dispatchEvent(event);

    return event;
};

Thanks for your code written in TypeScript. It was useful to me. — Chris, Jun 25 '20 at 01:05

score 1 · Answer 2 · answered Mar 10 '17 at 09:19

1

Answering my own question (thanks to the @LynnCrumbling for pointing out):

Browser specific event firing behavior better to replace with unified jQuery call like:

var eventObject = jQuery.Event("change"); // event you need to fire
$(targetObject).trigger(eventObject);

answered Mar 10 '17 at 09:19

Anatoly Yakimchuk

340
5
10

2

Awesome! And kudos for posting an answer. – Lynn Crumbling Mar 10 '17 at 13:26

Correct way to dispatch event in IE 11

2 Answers2