CODEWITHSUNDEEP
javascripthtml
pankaj
pankaj

Reputation: 21

CustomEvent() constructor is not supportive in IE

The CustomEvent() constructor is not supported in IE. Is it possible to make it compatible with IE11 at least? It's working with other browsers like Chrome and Firefox.

ex:-

var SpecialEvent = new CustomEvent(
  "SpecialMessage",
  {
   detail:
   {
     message: "Hello There",
     time: new Date()
   },
   bubbles: true,
   cancelable: true
  });

Upvotes: 2

Views: 727

Answers (3)

Ilker Cat
Ilker Cat

Reputation: 1942

MDN provides a polyfill for IE >= 9. See below.
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  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;
})();

Upvotes: 1

Juls
Juls

Reputation: 688

Use less time and energy and save yourself future hardships by switching over to jQuery events rather then using some special prototype sauce to get IE to work. jQuery events have a better implementation and are compatible with IE.

[unless you are firing events across frames then you need to prototype and use the traditional window.dispatchEvent(evt) ]

Old way:

var SpecialEvent = new CustomEvent(
  "SpecialMessage",
  {
   detail:
   {
     message: "Hello There",
     time: new Date()
   },
   bubbles: true,
   cancelable: true
  });

New way:

$(window).trigger("SpecialMessage", ["Hello There", new Date()]);

And to catch that event:

$(window).on("SpecialMessage",function(e, arg1, arg2){
    console.log(arg1);   // Hello There
    console.log(arg2);   // 2018-04-18...
});

Upvotes: 0

Sachin
Sachin

Reputation: 978

This should work on IE9+ 

var SpecialEvent = document.createEvent("CustomEvent");
SpecialEvent.initCustomEvent('SpecialMessage', false, false, {
  detail: {
    message: "Hello There",
    time: new Date()
  },
  bubbles: true,
  cancelable: true
});

Picked up from here.. Why aren't my parameters getting passed through to a dispatched event?

Upvotes: 0

Related Questions