使用 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>

附加文件

• 解構賦值