Internet Explorer 9, 10, and 11 Event Designer does not work

Question

I am creating an event, so use the DOM event constructor:

new Event('change'); 

This works great in modern browsers, but it fails in Internet Explorer 9, 10, and 11:

 Object doesn't support this action 

How can I fix Internet Explorer (ideally via polyfill)? If I can't, is there a workaround I can use?

Answer 1

There is a polyfill IE for the CustomEvent constructor in MDN . Adding CustomEvent to IE and using it instead works.

 (function () { if ( typeof window.CustomEvent === "function" ) return false; //If not IE function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; } CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })(); 

Answer 2

I think the best solution to solve your problem and create cross-browser events is:

 function createNewEvent(eventName) { var event; if (typeof(Event) === 'function') { event = new Event(eventName); } else { event = document.createEvent('Event'); event.initEvent(eventName, true, true); } return event; } 

Answer 3

This package does the magic:

https://www.npmjs.com/package/custom-event-polyfill

Include the package and send the event as follows:

 window.dispatchEvent(new window.CustomEvent('some-event')) 

Answer 4

If you're just trying to send a simple event, such as an HTML switch event, this works in Internet Explorer 11 as well as in other browsers:

 let toggle_event = null; try { toggle_event = new Event("toggle"); } catch (error) { toggle_event = document.createEvent("Event"); let doesnt_bubble = false; let isnt_cancelable = false; toggle_event.initEvent("toggle", doesnt_bubble, isnt_cancelable); } // disclosure_control is a details element. disclosure_control.dispatchEvent(toggle_event); 

Answer 5

I personally use the wrapper function to handle manually generated events. The following code will add a static method for all Event interfaces (all global variables ending in Event are the Event interface) and allow you to call functions such as element.dispatchEvent(MouseEvent.create('click')); on IE9 +.

 (function eventCreatorWrapper(eventClassNames){ eventClassNames.forEach(function(eventClassName){ window[eventClassName].createEvent = function(type,bubbles,cancelable){ var evt try{ evt = new window[eventClassName](type,{ bubbles: bubbles, cancelable: cancelable }); } catch (e){ evt = document.createEvent(eventClassName); evt.initEvent(type,bubbles,cancelable); } finally { return evt; } } }); }(function(root){ return Object.getOwnPropertyNames(root).filter(function(propertyName){ return /Event$/.test(propertyName) }); }(window))); 

EDIT: the search function of all Event interfaces can also be replaced with an array to change only the necessary event interfaces ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent'/*, etc... */] ).

Answer 6

the npm package for custom-event worked fine for me

https://www.npmjs.com/package/custom-event

 var CustomEvent = require('custom-event'); // add an appropriate event listener target.addEventListener('cat', function(e) { process(e.detail) }); // create and dispatch the event var event = new CustomEvent('cat', { detail: { hazcheeseburger: true } }); target.dispatchEvent(event);