Internet Explorer 9, 10 & 11 이벤트 생성자가 작동하지 않습니다

Internet Explorer 9, 10 & 11 이벤트 생성자가 작동하지 않습니다

---

이벤트를 만들고 있으므로 DOM 이벤트 생성자를 사용하십시오.

new Event('change');

이것은 최신 브라우저에서는 잘 작동하지만 Internet Explorer 9, 10 및 11에서는 다음과 같이 실패합니다.

Object doesn't support this action

Internet Explorer (이상적으로 폴리 필을 통해)를 수정하려면 어떻게해야합니까? 할 수 없으면 사용할 수있는 해결 방법이 있습니까?

---

MDN에는 CustomEvent 생성자를위한 IE polyfill 이 있습니다 . IE에 CustomEvent를 추가하고 대신 사용하십시오.

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

---

문제를 해결하고 브라우저 간 이벤트 생성을 처리하는 가장 좋은 솔루션은 다음과 같습니다.

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

---

이 패키지는 마법을 수행합니다.

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

패키지를 포함시키고 다음과 같이 이벤트를 전달하십시오.

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

---

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

---

the custom-event npm package worked beautifully 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);

---

I personally use a wrapper function to handle manually created events. The following code will add a static method on all Event interfaces (all global variables ending in Event are an Event interface) and allow you to call functions like 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 function to find all Event interfaces can also be replaced by an array to alter only the Event interfaces you need (['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).

---

There's a polyfill service which can patch this and others for you

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

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

참고URL : https://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work