I'；在javascript中使用for循环和eventlisteners时，我很难理解逻辑

我正在学习web开发，现在我正在研究vanilla javascript。我正在学习Udemy上的一门课程，一切都进行得很顺利，但是有一个挑战，我们应该构建一个drumkit，所以每次我们点击一个按钮，它都应该触发一个函数。因此，讲师给出的解决方案是使用for循环

var nbButtons = document.querySelectorAll(".drum").length;

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

var nbButtons=document.queryselectoral（“.drum”）.length；
for（i=0；i
nbButtons
只是按钮的数量，比如说5个按钮

然后使用
for
循环遍历所有5个按钮。循环执行5次，该数字临时存储在
i
变量中。因此，使用i还可以访问每个按钮并将事件侦听器添加到该按钮

您可以使用

for(i = 0; i<nbButtons; i++){
    console.log(i);
    console.log(document.querySelectorAll(".drum")[i])
}

（i=0；i）的

我们开始监听数字等于i的.drum元素上的点击，然后启动函数handleClick

这是你误解的部分。
您不会立即开始侦听当前元素。此行注册了侦听器，该侦听器随后或多或少地在后台侦听。因此，在
for
循环中，您为每个数组索引注册了一个事件侦听器。事件侦听器不会在下一次迭代中被覆盖。您可以注册多个事件侦听器同时侦听器，即使在同一元素上也是如此

您可以在devtools中验证：




有关
addEventListener（）
功能的更多信息：
您在for循环中所做的是使用queryselectoral函数搜索“.drum”，我认为这不是有效的-如果您必须使用“for”循环

我认为你应该：
var nbButtons=document.queryselectoral（“.drum”）；
var nbButtonsLen=nbButtons.length

for(i = 0; i<nbButtonsLen; i++){
    nbButtons[i].addEventListener("click", handleClick);
}
function handleClick() {
    alert("I got clicked!" + i);
}

for（i=0；i您的代码中有几个部分我会以不同的方式编写（有些部分在其他答案中指出），但关键问题是您有一个全局变量
i
，当任何
handleClick
函数实际运行时，它已经具有值
nbButtons
——因此，这是您在每次单击时看到的值也就不足为奇了

要确保为每个按钮记录了正确的
i
值，必须确保作为事件处理程序添加的函数实际使用“当前”值。以下是一种方法：

var nbButtons = document.querySelectorAll(".drum").length;

for(let i = 0; i<nbButtons; i++){
    document.querySelectorAll(".drum")[i].addEventListener("click", function() { handleClick(i);} );
} 

function handleClick(i) {
    alert("I got clicked!" + i);
}

var nbButtons=document.queryselectoral（“.drum”）.length；
对于（让i=0；看，现在完全有道理了，我确实认为每一个都在替换前一个。非常感谢你的回答。@虽然没问题！很高兴我能帮上忙：）虽然我同意这样重写更好，但这并不能解决实际问题。谢谢。你能解释一下为什么这样做更好吗？基本上，这样你的脚本就不必继续计算
document.queryselectoral（“.drum”）
每次通过循环。您无需多次键入！谢谢，我正在查看您的链接。