addEventListener nie działa w IE8

118

Dynamicznie utworzyłem checkbox. Kiedyś addEventListenerwywoływałem funkcję po kliknięciu pola wyboru, która działa w Google Chrome i Firefox, ale nie działa w Internet Explorer 8 . To jest mój kod:

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

setCheckedValues jest moim programem obsługi zdarzeń.

ravi404
źródło

Odpowiedzi:

215

Próbować:

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

Aktualizacja :: W przypadku wersji Internet Explorera starszych niż IE9 należy użyć metody attachEvent w celu zarejestrowania określonego detektora w obiekcie EventTarget, do którego jest wywoływany, w przypadku innych należy użyć metody addEventListener .

Sudhir Bastakoti
źródło
1
Opis, dlaczego należy tego użyć, poprawi odpowiedź.
dkris
@dkris dodał krótki opis jako wyjaśnienie, mam nadzieję, że to wyjaśnia
sprawę
44

Musisz używać attachEventw wersjach IE wcześniejszych niż IE9. Sprawdź, czy addEventListenerjest zdefiniowany i użyj, attachEventjeśli nie jest:

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

Zauważ, że IE11 usunieattachEvent .

Zobacz też:

Zeta
źródło
13

To również jest proste rozwiązanie dla różnych przeglądarek:

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

Zamiast „kliknięcia” może być oczywiście dowolne zdarzenie.

Siergiej Oniszczenko
źródło
+1, myślę, że to sprytne obejście! addEventListenerTrzeci argument i tak jest opcjonalny, więc może to być dobre rozwiązanie i jest ładniejsze niż gałęzie if-else. Ale w tym przypadku _checkboxjest elementem docelowym, a nie window. :) Więc może mógłbyś stworzyć funkcję, w której celem zdarzenia jest inny argument.
Sk8erPeter
Och, głosowałem za wcześnie ... :) Otrzymuję komunikat „TypeError: Illegal invocation” w przeglądarce Chrome, jeśli próbuję aliasować wywołania elementów docelowych zdarzeń addEventListener- zobacz ten temat: stackoverflow.com/questions/1007340/… . Tak więc w przypadku windowobiektu działa poprawnie, ale nie działa z innymi węzłami w dokumencie. W ten sposób sugerowane przez ciebie aliasowanie NIE jest poprawne dla przypadku wymienionego w pierwotnym pytaniu! Jakie byłoby twoje obejście?
Sk8erPeter
3

IE nie obsługuje addEventListeneraż do wersji 9, więc musisz użyć attachEvent, oto przykład:

if (!someElement.addEventListener) {
    _checkbox.attachEvent("onclick", setCheckedValues);
}
else {
    _checkbox.addEventListener("click", setCheckedValues, false);
}
Adriano Repetti
źródło
2

Być może łatwiej (i ma większą wydajność), jeśli delegujesz obsługę zdarzeń do innego elementu, na przykład do tabeli

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

});

w ten sposób będziesz mieć tylko jedną procedurę obsługi zdarzeń, która będzie działać również dla nowo dodanych elementów. Wymaga to jQuery> = 1.7

W przeciwnym razie użyj delegate ()

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

});
Nicola Peluchetti
źródło
2

Możesz użyć poniższej funkcji addEvent (), aby dodać zdarzenia dla większości rzeczy, ale pamiętaj, że dla XMLHttpRequest if (el.attachEvent)nie powiedzie się w IE8, ponieważ nie obsługuje, XMLHttpRequest.attachEvent()więc musisz użyć XMLHttpRequest.onload = function() {}zamiast tego.

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) {
}
Zaraz
źródło
2

Zdecydowałem się na szybkie Polyfill w oparciu o powyższe odpowiedzi:

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

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

Oczywiście, podobnie jak powyższe odpowiedzi, tego nie gwarantuje window.attachEvent , istnieje, co może, ale nie musi, stanowić problem.

Campbeln
źródło
0

Jeśli używasz jQuery, możesz napisać:

$( _checkbox ).click( function( e ){ /*process event here*/ } )
philipp
źródło
0
if (document.addEventListener) {
    document.addEventListener("click", attachEvent, false);
}
else {
    document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
    var target = ev.target || ev.srcElement;
    // custom code
}
Pramod Kumar
źródło