Question

我试图让一些事件监听器工作，但由于某种原因它们无法正常工作。

下面的两个事件块本身可以正常工作，但只有removes块一起工作。如果我注释掉该块，则users块开始工作。造成这种情况的原因是什么？

var removes = document.getElementsByClassName("x");
for(var c in removes){
    removes[c].addEventListener("click", function(){
        console.log("Remove");
    }, false);
}

var users = document.getElementsByClassName("user");
for(var i in users){
    users[i].addEventListener("click", function(){
        console.log("Go");
    }, false);
}

以下是HTML的示例：

<div class="user" data-id="123456">
    <div>
        <img id="avatar" src="http://example.com/photos/image.png" style="height: 50px;" alt="Avatar"/>
    </div>
    <div>
        <h3>My Username</h3>
        <p>example@example.com</p>
    </div>
    <div class="x" data-id="123456">&times;</div>
</div>

Answer 1

getElementsByClassName返回一个HTMLNodeList，它基本上是一个节点数组，而不是表单上的对象

{ "a": "b" }

所以你不能用于......循环，而是常规用于

e.g。

for( var i = 0; i < removes.length; i++ ){
    removes[i].addEventListener( "click", function(){} );
}

Answer 2

for(var c in removes)

将返回HTMLNodeList的属性。

例如：

如果您运行for(var i in removes) { console.log(i)}，您将获得

length 
item 
namedItem

所以改为使用

for( var i = 0; i < removes.length; i++ ){
    removes[i].addEventListener( "click", function(){console.log("Remove");
    }, false} );
}

getElementsByClassName似乎不起作用

2 个答案: