addEventListener在IE8中不起作用

我已经动态创建了一个复选框。我曾经addEventListener在单击复选框时调用过一个函数，该函数在Google Chrome和Firefox中有效，但在Internet Explorer 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。

您必须attachEvent在IE9之前的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

否则使用委托（）

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

});

您可以使用下面的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) {
}

根据以上答案，我选择了一种快速的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
}