addEventListener在IE8中无法正常工作

Question

我动态创建了一个复选框。我使用addEventListener在单击复选框时调用一个函数，在Google Chrome和Firefox中工作，但在Internet Explorer 8中不起作用。下面是我的代码：

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

setCheckedValues 是我的事件处理程序。

- ravi404

Answer 1

尝试：

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

更新: 对于IE9之前的Internet Explorer版本，应使用attachEvent方法将指定的侦听器注册到调用它的EventTarget上，对于其他浏览器则应使用addEventListener。

- Sudhir Bastakoti

---

解释为什么应该使用这个功能将会提高答案的质量。 - dkris

@dkris添加了一个简短的描述作为澄清，希望这可以使事情更加清晰。 :) - Sudhir Bastakoti

Answer 2

在IE9之前的版本中，您必须使用attachEvent。检测是否定义了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 方法

- Zeta

Answer 3

这也是一个简单的跨浏览器解决方案：

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

当然可以使用任何事件，而不仅仅是“点击”。

- Sergey Onishchenko

---

+1，我认为这是一个聪明的解决方案！addEventListener 的第三个参数是可选的，所以这可能是一个好的解决方案，而且比 if-else 分支更好。但在这种情况下，_checkbox 是目标元素，而不是 window。 :) 因此，也许你可以创建一个函数，其中事件目标是另一个参数。 - Sk8erPeter

哦，我点赞太早了... :) 如果我尝试别名事件目标元素的 addEventListener 调用，Chrome 会报错 "TypeError: Illegal invocation" - 参见这个主题：https://dev59.com/h3NA5IYBdhLWcg3wVcJx。所以对于 window 对象，它可以正常工作，但是对于文档内部的其他节点则无法正常工作。因此，你提出的别名方法对于原问题中提到的情况是不正确的！你有什么解决方法？ - Sk8erPeter

Answer 4

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

- Anon

Answer 5

在IE9版本之前，IE不支持addEventListener，所以你需要使用attachEvent，这里是一个示例：

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

- Adriano Repetti

Answer 6

也许更容易（并且性能更好）的方法是将事件处理委托给另一个元素，例如您的表格。

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

});

以此方式，你只需要一个事件处理程序，这也适用于新添加的元素。这需要 jQuery >= 1.7。

否则，请使用 delegate()。

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

});

- Nicola Peluchetti

Answer 7

我选择了一种基于上述答案的快速Polyfill解决方案：

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

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

当然，就像上面的答案一样，这并不能确保 window.attachEvent 存在或不存在，这可能是一个问题，也可能不是。

- Campbeln

Answer 8

如果你使用jQuery，你可以写成：

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

- philipp

Answer 9

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