Question

我不明白为什么addEventListener只能在循环之外工作。使用以下代码，我在JsFiddle（http://jsfiddle.net/E7gaZ/1/）中创建了示例：

window.addEventListener('load', function (){
    document.getElementById('myId').addEventListener(
        'click', myHandler, false
    );
    var myClass = document.getElementsByClassName('myClass');
    for(var i=0; i<myClass.length; i++) {
        myClass[i].addEventListener("onclick", myHandler, false);
    }
});
function myHandler(ev) {
    alert(ev.target.innerHTML);
    ev.preventDefault();
}

点击“myId”链接，同时提醒“myId”并阻止重新加载页面，而其他链接则不会调用myHandler。

以下方法似乎运行良好（仍在window.load事件（http://jsfiddle.net/E7gaZ/2/）内：

document.getElementById('myId').onclick = myHandler;
var myClass = document.getElementsByClassName('myClass');
for(var i=0; i<myClass.length; i++) {
    myClass[i].onclick = myHandler;
}

知道为什么吗？

修改：为什么我要使用addEventListener代替.onclick =？因为我可以在同一个事件上添加多个侦听器。

编辑：感谢您的解决方案，伙计们。结论是，它正在使用 myId ，因为我使用的是正确的语法（click），而不是* myClass ，因为语法错误（{{ 1}}）。

Answer 1

我很确定这个：

myClass[i].addEventListener("onclick", myHandler, false);

需要：

myClass[i].addEventListener("click", myHandler, false);

对我来说，将'onclick'作为听众附加是没有意义的。

Answer 2

使用“addEventListener”时处理程序未触发的原因是您使用“addEventListener”传递的事件名称的字符串必须是“click”，而不是“onclick”......

...除了你使用“onclick”的Internet Explorer之外，还有“attachEvent”而不是“addEventListener”作为将事件监听器附加到元素的方法名称在IE中是不同的！（除其他外;））

关于你的“onclick”与“addEventListener”问题。使用onclick，您只能将一个侦听器分配给单个事件类型，而通过“addEventListener”/“attachEvent”添加侦听器，您可以为单个事件类型触发多个回调处理程序，如果您选择。在你的jsfiddle例子中，它没关系，因为事件只有一个处理程序。

此外，“onclick”是所谓的内联处理程序，具体取决于您编写JavaScript应用程序的方式，这可能意味着您无法访问应用程序对象的变量部分/闭包可能会成为一个架构问题。

循环中的addEventListener

2 个答案: