document.querySelectorAll 奇怪的行為

Question

我有一個簡單的 HTML 和相應的 java 腳本代碼。

問題是：

對於.clear和.result按鈕，兩個事件偵聽器被附加和調用（storeInput 以及它們的實際偵聽器）。 實際上，在這種情況下不應調用storeInput

為了調試問題，我在下面兩行注釋掉：

//document.querySelector(".clear").addEventListener('click',clear); //document.querySelector(".result").addEventListener('click',calculate);

因此， .clear和.result按鈕沒有事件偵聽器但是，如果單擊它們，仍然會調用storeInput listener器

問題是：

為什么document.querySelectorAll(".digit")和document.querySelectorAll(".operator")也將事件偵聽器添加到.clear和.result按鈕？

 function storeInput() { console.log('storeInput'); } function clear() { console.log('clear'); } function calculate() { console.log('calculate'); } const digits = document.querySelectorAll(".digit"); digits.forEach(function() { this.addEventListener('click', storeInput); }); const operators = document.querySelectorAll(".operator"); operators.forEach(function() { this.addEventListener('click', storeInput); }) document.querySelector(".clear").addEventListener('click', clear); document.querySelector(".result").addEventListener('click', calculate);

 <input type="text" /> <br/> <input type="button" class="digit" value="0" /> <input type="button" class="digit" value="1" /> <input type="button" class="digit" value="2" /> <input type="button" class="digit" value="3" /> <br/> <input type="button" class="digit" value="4" /> <input type="button" class="digit" value="5" /> <input type="button" class="digit" value="6" /> <input type="button" class="digit" value="7" /> <br/> <input type="button" class="digit" value="8" /> <input type="button" class="digit" value="9" /> <br/> <input type="button" class="clear" value="C" /> <br/> <input type="button" class="operator" value="+" /> <input type="button" class="operator" value="-" /> <input type="button" class="operator" value="/" /> <input type="button" class="operator" value="*" /> <br/> <input type="button" class="result" value="=" />

Answer 1

在forEach中， this沒有特殊含義，因此您真正要做的是將這些處理程序附加到window ，因為this在松散模式下默認為window 。 （您可能已經看到使用each的 jQuery 代碼；jQuery 將this設置為each回調中的每個元素，但forEach不能那樣工作。）

要在forEach回調中使用該元素，請接受該元素作為參數並使用該參數，請參閱***注釋：

 function storeInput() { console.log('storeInput'); } function clear() { console.log('clear'); } function calculate() { console.log('calculate'); } const digits = document.querySelectorAll(".digit"); digits.forEach(function(el) { // *** Note the parameter `el` el.addEventListener('click', storeInput); // ^ note using the parameter }); const operators = document.querySelectorAll(".operator"); operators.forEach(function(el) { // *** Note the parameter `el` el.addEventListener('click', storeInput); // ^ note using the parameter }) document.querySelector(".clear").addEventListener('click', clear); document.querySelector(".result").addEventListener('click', calculate);

 <input type="text" /> <br/> <input type="button" class="digit" value="0" /> <input type="button" class="digit" value="1" /> <input type="button" class="digit" value="2" /> <input type="button" class="digit" value="3" /> <br/> <input type="button" class="digit" value="4" /> <input type="button" class="digit" value="5" /> <input type="button" class="digit" value="6" /> <input type="button" class="digit" value="7" /> <br/> <input type="button" class="digit" value="8" /> <input type="button" class="digit" value="9" /> <br/> <input type="button" class="clear" value="C" /> <br/> <input type="button" class="operator" value="+" /> <input type="button" class="operator" value="-" /> <input type="button" class="operator" value="/" /> <input type="button" class="operator" value="*" /> <br/> <input type="button" class="result" value="=" />

---

另一種選擇是在數字周圍放置一個容器，在運算符周圍放置另一個容器，並僅處理對這些容器的點擊，使用事件 object 的target屬性來查看單擊了哪個數字或運算符。

 function storeInput(e) { console.log('storeInput: ' + e.target.value); } function clear() { console.log('clear'); } function calculate() { console.log('calculate'); } document.querySelector(".digits").addEventListener('click', storeInput); document.querySelector(".operators").addEventListener('click', storeInput); document.querySelector(".clear").addEventListener('click', clear); document.querySelector(".result").addEventListener('click', calculate);

 <input type="text" /> <div class="digits"> <input type="button" class="digit" value="0" /> <input type="button" class="digit" value="1" /> <input type="button" class="digit" value="2" /> <input type="button" class="digit" value="3" /> <br/> <input type="button" class="digit" value="4" /> <input type="button" class="digit" value="5" /> <input type="button" class="digit" value="6" /> <input type="button" class="digit" value="7" /> <br/> <input type="button" class="digit" value="8" /> <input type="button" class="digit" value="9" /> </div> <input type="button" class="clear" value="C" /> <div class="operators"> <input type="button" class="operator" value="+" /> <input type="button" class="operator" value="-" /> <input type="button" class="operator" value="/" /> <input type="button" class="operator" value="*" /> </div> <input type="button" class="result" value="=" />