我試圖讓一系列按鈕（在 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>uj5u.com熱心網友回復：
您的問題來自使用var關鍵字定義變數的行為。
在 ES6 中引入了let和const關鍵字。如果您使用它們，您將不再面臨var提升和范圍的問題。
因此，您可以let在i宣告中添加一個關鍵字，如下所示：
for (let i=0; i<=6; i ) {
//the rest of the code
}
您可以在這個問題中閱讀更多內容。
問題中鏈接問題的簡短摘要
當您撰寫時，i = 0您正在定義物件i中的window屬性。然后在回圈中增加這個值。i在傳遞的函式中使用時，javascript 從window物件中獲取值。
另一方面，let關鍵字將變數的范圍定義為回圈的范圍，因此傳遞的函式始終包含值的副本，當傳遞函式時。
uj5u.com熱心網友回復：
即使在回圈之后，該函式似乎也會跟蹤 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>uj5u.com熱心網友回復：
你可以用這種方式干燥你的代碼：
document.querySelectorAll('button').forEach((el, i) => {
el.addEventListener('click', () => alert(`clicked ${i 1}`))
} )
uj5u.com熱心網友回復：
您可以利用事件委托，而不是將偵聽器附加到所有按鈕，它允許您將一個偵聽器添加到父元素（.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>附加檔案
- 解構賦值
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339667.html
標籤：javascript 数组 循环 添加事件监听器