Конструктор событий Internet Explorer 9, 10 и 11 не работает

Я создаю событие, поэтому используйте конструктор событий DOM:

new Event('change');

это прекрасно работает в современных браузерах, однако в Internet Explorer 9, 10 и 11, это не удается с: 

Object doesn't support this action

Как я могу исправить Internet Explorer (в идеале через полифилл)? Если я не могу, есть ли обходной путь, который я могу использовать?

6 85
internet-explorer-9 internet-explorer-10 internet-explorer-11 dom-events custom-events

6 ответов:

здесь IE polyfill для конструктора CustomEvent в MDN. Добавление CustomEvent в IE и использование этого вместо этого работает.

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

Я думаю, что лучшим решением для решения вашей проблемы и решения проблемы создания кросс-браузера является:

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

этот пакет делает волшебство:

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

включить пакет и отправить событие следующим образом:

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

Если вы просто пытаетесь отправить простое событие, такое как событие переключения HTML, это работает в Internet Explorer 11, а также в других браузерах:

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);
2

Я лично использую функцию-оболочку для обработки вручную созданных событий. Следующий код добавит статический метод на все Event интерфейсы (все глобальные переменные заканчиваются на Event являются интерфейсом событий) и позволяют вызывать такие функции, как element.dispatchEvent(MouseEvent.create('click')); на 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: функция, чтобы найти все Event интерфейсы также могут быть заменены массивом для изменения только необходимых интерфейсов событий (['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).

1

the custom-event npm пакет работал красиво для меня

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);
1