javascript - 循环内的 addEventListener

标签 javascript dom-events

我不明白为什么 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 上工作,因为语法错误(onclick)。

最佳答案

我很确定:

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

需要:

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

对我来说,将“onclick”附加为监听器是没有意义的。

关于javascript - 循环内的 addEventListener,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21554609/

相关文章:

javascript - side el 的嵌套 id 中的 Backbone 渲染模板

javascript - onbeforeunload 的可靠性

javascript - 组件不重新渲染 - ReactJS

javascript - 附加到 Canvas 内对象的事件

javascript - Redux-saga 无法读取react-native

IE 的 Javascript 代码覆盖率工具

javascript - 无法读取 slider 上 null 的属性 'addEventListener'

javascript - touches 和 targetTouches 的区别

javascript - 有没有办法在不添加事件的情况下对点击使用react?

Javascript onmouseup 事件未按预期触发