이벤트를 만들고 있으므로 DOM 이벤트 생성자를 사용하십시오.
new Event('change');
이것은 최신 브라우저에서는 잘 작동하지만 Internet Explorer 9, 10 및 11에서는 다음과 같이 실패합니다.
Object doesn't support this action
Internet Explorer (이상적으로 폴리 필을 통해)를 수정하려면 어떻게해야합니까? 내가 할 수 없다면 사용할 수있는 해결 방법이 있습니까?
답변
MDN에는 CustomEvent 생성자를위한 IE 폴리 필 이 있습니다 . 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);
답변
당신을 위해 이것과 다른 것들을 패치 할 수있는 polyfill 서비스가 있습니다
https://polyfill.io/v3/url-builder/
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
답변
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);
답변
개인적으로 래퍼 함수를 사용하여 수동으로 만든 이벤트를 처리합니다. 다음 코드는 모든 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)));
편집 : 모든 Event
인터페이스 를 찾는 기능을 필요한 이벤트 인터페이스 ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]
) 만 변경하는 배열로 바꿀 수도 있습니다 .