javascript addeventlistener란 - IE8에서 작동하지 않는 addEventListener




to document (9)

이벤트 처리를 다른 요소 (예 : 테이블)에 위임하면 작업이 더 쉽고 성능이 향상됩니다.

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

});

이런 식으로 하나의 이벤트 처리기 만 갖게되며 새로 추가 된 요소에 대해서도 작동합니다. jQuery> = 1.7이 필요합니다.

그렇지 않으면 delegate ()를 사용하십시오.

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

});

동적으로 확인란을 만들었습니다. addEventListener 를 사용 addEventListener Google 크롬 및 Firefox 에서 작동 하지만 Internet Explorer 8에서는 작동하지 않는 체크 상자를 클릭하여 함수를 호출했습니다. 이것은 내 코드입니다.

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

setCheckedValues 는 내 이벤트 처리기입니다.


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

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

물론 '클릭'대신 모든 이벤트가 가능합니다.


시험:

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

업데이트 :: IE9 이전 버전의 Internet Explorer에서는 attachEvent 메서드를 사용하여 지정된 Listener를 호출 된 EventTarget 에 등록해야합니다. 다른 addEventListeneraddEventListener 사용해야합니다.


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

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

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

물론 위의 답변과 마찬가지로 window.attachEvent 가 있는지 여부는 문제가 될 수도 있고 아닐 수도 있습니다.


IE는 버전 9까지 addEventListener 지원하지 않으므로 attachEvent 를 사용해야합니다. 여기에 예제가 있습니다.

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

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

jQuery를 사용한다면 다음과 같이 작성할 수 있습니다 :

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

아래 addEvent () 함수를 사용하여 대부분의 이벤트를 추가 할 수 있지만 XMLHttpRequest.attachEvent() 를 사용해야하므로 XMLHttpRequest.attachEvent() 지원하지 않기 때문에 IE8에서 오류가 발생하는 경우 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) {
}

나는 이것이 다른 개발자들이이 벽의 벽에 머리를 두드리는 것에 사용될 수 있기를 바랍니다. 다음 중 하나가 iOS 6의 Safari가 POST 응답을 캐싱하지 못하게한다는 것을 발견했습니다.

  • 요청 헤더에 [cache-control : no-cache]를 추가합니다.
  • 현재 시간과 같은 가변 URL 매개 변수 추가
  • 응답 헤더에 [pragma : no-cache]를 추가했습니다.
  • 응답 헤더에 [cache-control : no-cache]를 추가합니다.

내 솔루션은 내 자바 스크립트 (내 모든 AJAX 요청은 POST)에서 다음과 같다.

$.ajaxSetup({
    type: 'POST',
    headers: { "cache-control": "no-cache" }
});

또한 많은 서버 응답에 [pragma : no-cache] 헤더를 추가합니다.

위의 솔루션을 사용하는 경우 $ .ajax () 호출은 전역으로 설정됩니다. false는 $ .ajaxSetup ()에 지정된 설정을 사용하지 않으므로 헤더를 다시 추가해야합니다.





javascript internet-explorer-8 addeventlistener