使用 for 循环将事件监听器添加到按钮数组

Question

我试图让一系列按钮（在 html 中包含的 div 中）在点击时发出警报。 为此，我正在使用 addEventListener。 如果我只是列出一个列表（如下面的评论所示），结果很好。 我尝试使用 for 循环使代码变干，但无论我按什么，它都只返回“点击 8”。 据我所知，流程应该从测试 i=0 开始，然后以与整个列表相同的方式继续其他流程。 所以如果我按下按钮[0]，我应该得到“点击1”，这都是因为其他条件是假的。 提前致谢。

 // document.querySelectorAll("button")[0].addEventListener("click", function(){alert("clicked 1")}); // document.querySelectorAll("button")[1].addEventListener("click", function(){alert("clicked 2")}); // document.querySelectorAll("button")[2].addEventListener("click", function(){alert("clicked 3")}); // document.querySelectorAll("button")[3].addEventListener("click", function(){alert("clicked 4")}); // document.querySelectorAll("button")[4].addEventListener("click", function(){alert("clicked 5")}); // document.querySelectorAll("button")[5].addEventListener("click", function(){alert("clicked 6")}); // document.querySelectorAll("button")[6].addEventListener("click", function(){alert("clicked 7")}); for(i=0; i<=6; i++) { document.querySelectorAll("button")[i].addEventListener("click", function(){alert("clicked " + (i+1))}); }

 <div class="set"> <button class="w drum">w</button> <button class="a drum">a</button> <button class="s drum">s</button> <button class="d drum">d</button> <button class="j drum">j</button> <button class="k drum">k</button> <button class="l drum">l</button> </div>

Answer 1

您的问题来自使用var关键字定义变量的行为。

在 ES6 中引入了let和const关键字。 如果您使用它们，您将不再面临var提升和范围的问题。

因此，您可以像这样在i声明中添加一个let关键字：

for (let i=0; i<=6; i++) {
  //the rest of the code
}

您可以在这个问题中阅读更多内容。

问题中链接问题的简短摘要

当您写入i = 0您是在定义window对象中的i属性。 然后在循环中增加这个值。 在传递的函数中使用i时，javascript 正在从window对象获取值。

另一方面， let关键字将变量的范围定义为循环的范围，因此传递的函数始终包含值的副本，当传递函数时。

Answer 2

即使在循环之后，该函数似乎也会跟踪 I 的值。 添加另一个变量并将其绑定到警报

 // document.querySelectorAll("button")[0].addEventListener("click", function(){alert("clicked 1")}); // document.querySelectorAll("button")[1].addEventListener("click", function(){alert("clicked 2")}); // document.querySelectorAll("button")[2].addEventListener("click", function(){alert("clicked 3")}); // document.querySelectorAll("button")[3].addEventListener("click", function(){alert("clicked 4")}); // document.querySelectorAll("button")[4].addEventListener("click", function(){alert("clicked 5")}); // document.querySelectorAll("button")[5].addEventListener("click", function(){alert("clicked 6")}); // document.querySelectorAll("button")[6].addEventListener("click", function(){alert("clicked 7")}); for(var i=0;i<7; i++) { let out = i+1 document.getElementsByTagName("button")[i].addEventListener("click", function(){alert("clicked " + (out))}); }

 <div class="set"> <button class="w drum">w</button> <button class="a drum">a</button> <button class="s drum">s</button> <button class="d drum">d</button> <button class="j drum">j</button> <button class="k drum">k</button> <button class="l drum">l</button> </div>

Answer 3

你可以用这种方式干燥你的代码：

document.querySelectorAll('button').forEach((el, i) => {
    el.addEventListener('click', () => alert(`clicked ${i+1}`))
} )

Answer 4

您可以利用事件委托，而不是将侦听器附加到所有按钮，它允许您将一个侦听器添加到父元素（在本例中为.set ），并在按钮“冒泡”DOM 时从按钮中捕获事件。

在这个例子中，我记录了按钮被点击时的文本内容。

 // Cache the parent element and add a listener const set = document.querySelector('.set'); set.addEventListener('click', handleClick, false); function handleClick(e) { // Extract the nodeName and textContent from // the clicked element const { nodeName, textContent } = e.target; // If it's a button, log the text if (nodeName === 'BUTTON') { console.log(textContent); } }

 <div class="set"> <button class="w drum">w</button> <button class="a drum">a</button> <button class="s drum">s</button> <button class="d drum">d</button> <button class="j drum">j</button> <button class="k drum">k</button> <button class="l drum">l</button> </div>

附加文件

• 解构赋值