customevent - El constructor de eventos de Internet Explorer 9, 10 y 11 no funciona

js customevent

Question

Estoy creando un evento, así que use el constructor de eventos DOM:

new Event(''change'');

Esto funciona bien en los navegadores modernos, sin embargo, en Internet Explorer 9, 10 y 11, falla con:

Object doesn''t support this action

¿Cómo puedo arreglar Internet Explorer (idealmente a través de un polyfill)? Si no puedo, ¿hay alguna solución que pueda usar?

Answer 1

Creo que la mejor solución para resolver su problema y tratar con la creación de eventos entre navegadores es:

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 2

Este paquete hace la magia:

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

Incluya el paquete y envíe el evento de la siguiente manera:

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

Answer 3

Hay un polyfill de IE para el constructor CustomEvent en MDN . Agregar CustomEvent a IE y usarlo en su lugar funciona.

(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 4

Hay un servicio de polyfill que puede parchear este y otros para usted

https://polyfill.io/v3/url-builder/

 <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

Answer 5

Si solo está tratando de enviar un evento simple como el evento de alternancia HTML, esto funciona en Internet Explorer 11 y en los otros navegadores:

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 6

Yo personalmente uso una función de contenedor para manejar eventos creados manualmente. El siguiente código agregará un método estático en todas las interfaces de Event (todas las variables globales que terminan en Event son una interfaz de Evento) y le permitirá llamar a funciones como element.dispatchEvent(MouseEvent.create(''click'')); en 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)));

EDITAR: La función para encontrar todas las interfaces de Event también se puede reemplazar por una matriz para alterar solo las interfaces de eventos que necesita ( [''Event'', ''MouseEvent'', ''KeyboardEvent'', ''UIEvent'' /*, etc... */] ).

Answer 7

el paquete npm de custom-event personalizados funcionó maravillosamente para mí

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