时间戳

首页 > 解决方案 > 为什么在 DOM querySelector for 循环中通过 [i] 进行迭代允许我以任何顺序使用事件侦听器？

javascript - 为什么在 DOM querySelector for 循环中通过 [i] 进行迭代允许我以任何顺序使用事件侦听器？

问题描述

在下面的代码中，我创建了一个 for 循环，它允许我在简单网页上的 5 个按钮中的任何一个上生成警报。我的问题是，如果我的查询选择器中的 [i] 迭代 1，为什么这种格式允许我单击任何按钮来触发警报？不应该只允许我按索引从 0 到 5 的顺序单击按钮吗？即使我在技术上单击元素 [5]，无论顺序如何，在 for 循环中的 [0] 都可以为任何按钮工作，到底发生了什么？

for (var i = 0; 
i<document.querySelectorAll(".drum").length; i++){
document.querySelectorAll(".drum") 
[i].addEventListener("click", function () {
alert("I got clicked!");
});
}

标签： javascriptfor-loopdom

解决方案

您的 for 循环相当于：

// Define an action to do when user clicks, but pass to the next line without waiting that the click event to occur
document.querySelectorAll(".drum")[0].addEventListener(...);
document.querySelectorAll(".drum")[1].addEventListener(...);
document.querySelectorAll(".drum")[2].addEventListener(...);
...

在每次迭代中，我们只需定义一个在检测到点击时执行的函数。但是，这并不意味着我们正在等待用户真正点击以传递到下一次迭代。

推荐阅读