addEventListener не работает в IE8


118

Я установил флажок динамически. Я использовал addEventListenerдля вызова функции при щелчке по флажку, которая работает в Google Chrome и Firefox, но не работает в Internet Explorer 8 . Это мой код:

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

setCheckedValues это мой обработчик событий.

Ответы:


215

Пытаться:

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

Обновление :: Для версий Internet Explorer до IE9 следует использовать метод attachEvent для регистрации указанного прослушивателя в EventTarget, для которого он вызывается, для других следует использовать addEventListener .


1
Описание того, почему это следует использовать, улучшит ответ.
dkris

@dkris добавил краткое описание в качестве пояснения, я надеюсь, что это проясняет ситуацию .. :)
Судхир Бастакоти

44

Вы должны использовать attachEventв версиях IE до IE9. Определите, addEventListenerопределено attachEventли оно, и используйте, если нет:

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

Обратите внимание, что IE11 удалитattachEvent .

Смотрите также:


13

Это тоже простое кроссбраузерное решение:

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

Вместо «щелкнуть» конечно может быть любое событие.


+1, я думаю, что это умный обходной путь! addEventListenerТретий аргумент в любом случае необязателен, так что это может быть хорошим решением, и оно лучше, чем ветви if-else. Но в данном случае _checkboxэто целевой элемент, а не window. :) Так что, возможно, вы могли бы создать функцию, в которой цель события является другим аргументом.
Sk8erPeter

О, я слишком рано проголосовал за ... :) Я получаю сообщение «TypeError: Illegal invocation» в Chrome, если пытаюсь создать псевдоним для addEventListenerвызовов целевых элементов события - см. Эту тему: stackoverflow.com/questions/1007340/… . Таким образом, для windowобъекта он работает правильно, но не работает для других узлов внутри документа. Таким образом, ваш предложенный псевдоним НЕ подходит для случая, упомянутого в исходном вопросе! Каким будет обходной путь?
Sk8erPeter

3

IE не поддерживает addEventListenerдо версии 9, поэтому вам нужно использовать attachEvent, вот пример:

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

2

Может быть, это проще (и имеет большую производительность), если вы делегируете обработку событий другому элементу, например вашей таблице

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

});

таким образом у вас будет только один обработчик событий, и это будет работать также для вновь добавленных элементов. Для этого требуется jQuery> = 1.7

В противном случае используйте delegate ()

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

});

2

Вы можете использовать приведенную ниже функцию addEvent () для добавления событий для большинства вещей, но обратите внимание, что для XMLHttpRequest if (el.attachEvent)произойдет сбой в 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) {
}

2

Я выбрал быстрый Polyfill, основываясь на приведенных выше ответах:

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

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

Конечно, как и ответы выше, это не гарантирует, что оно window.attachEventсуществует, что может быть или не быть проблемой.


0

Если вы используете jQuery, вы можете написать:

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

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
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.