IE8에서 작동하지 않는 addEventListener

동적으로 확인란을 만들었습니다. 내가 사용하고 addEventListener구글 크롬과 파이어 폭스에서 작동하지만 체크 박스의 클릭에 함수를 호출하는 인터넷 익스플로러 8에서 작동하지 않습니다 . 이것은 내 코드입니다.

var _checkbox = document.createElement("input");
_checkbox.addEventListener("click", setCheckedValues, false);

setCheckedValues 내 이벤트 핸들러입니다.

시험:

if (_checkbox.addEventListener) {
    _checkbox.addEventListener("click", setCheckedValues, false);
}
else {
    _checkbox.attachEvent("onclick", setCheckedValues);
}

업데이트 :: IE9 이전의 Internet Explorer 버전의 경우, attachEvent 메소드를 사용하여 지정된 리스너를 호출 된 EventTarget 에 등록 해야하며 다른 경우에는 addEventListener를 사용해야합니다.

attachEventIE9 이전의 IE 버전에서 사용해야 합니다. addEventListener정의 여부를 감지 하고 attachEvent그렇지 않은 경우 사용 :

if(_checkbox.addEventListener)
    _checkbox.addEventListener("click",setCheckedValues,false);
else
    _checkbox.attachEvent("onclick",setCheckedValues);
//                         ^^ -- onclick, not click

참고 IE11이 제거됩니다attachEvent .

또한보십시오:

• MDN : element.addEventListener: 레거시 Internet Explorer 및 attachEvent
• MSDN : attachEvent 메서드

이것은 또한 간단한 크로스 브라우저 솔루션입니다.

var addEvent =  window.attachEvent||window.addEventListener;
var event = window.attachEvent ? 'onclick' : 'click';
addEvent(event, function(){
    alert('Hello!')
});

물론 '클릭'대신 모든 이벤트가 될 수 있습니다.

IE는 addEventListener버전 9까지 지원하지 않으므로을 사용해야 attachEvent합니다. 예는 다음과 같습니다.

if (!someElement.addEventListener) {
    _checkbox.attachEvent("onclick", setCheckedValues);
}
else {
    _checkbox.addEventListener("click", setCheckedValues, false);
}

이벤트 처리를 다른 요소 (예 : 테이블)에 위임하면 더 쉬울 수도 있고 성능도 더 좋습니다.

$('idOfYourTable').on("click", "input:checkbox", function(){

});

이렇게하면 이벤트 핸들러가 하나만 생기고 새로 추가 된 요소에서도 작동합니다. 이것은 jQuery> = 1.7이 필요합니다.

그렇지 않으면 delegate () 사용

$('idOfYourTable').delegate("input:checkbox", "click", function(){

});

아래 addEvent () 함수를 사용하여 대부분의 이벤트를 추가 if (el.attachEvent)할 수 있지만 XMLHttpRequest의 경우 IE8에서 실패 합니다. 지원하지 않으므로 대신 XMLHttpRequest.attachEvent()사용해야 XMLHttpRequest.onload = function() {}합니다.

function addEvent(el, e, f) {
    if (el.attachEvent) {
        return el.attachEvent('on'+e, f);
    }
    else {
        return el.addEventListener(e, f, false);
    }
}

var ajax = new XMLHttpRequest();
ajax.onload = function(e) {
}

위의 답변을 기반으로 빠른 Polyfill을 선택했습니다.

//# Polyfill
window.addEventListener = window.addEventListener || function (e, f) { window.attachEvent('on' + e, f); };

//# Standard usage
window.addEventListener("message", function(){ /*...*/ }, false);

물론 위의 답변과 같이 문제가 window.attachEvent될 수도 있고 아닐 수도 있는 존재를 보장하지 않습니다 .

jQuery를 사용하는 경우 다음과 같이 작성할 수 있습니다.

$( _checkbox ).click( function( e ){ /*process event here*/ } )

if (document.addEventListener) {
    document.addEventListener("click", attachEvent, false);
}
else {
    document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
    var target = ev.target || ev.srcElement;
    // custom code
}