document.querySelectorAll 奇怪的行为

Question

I have a simple HTML like below and corresponding java script code.

The issue is:

For .clear and .result buttons, two event listeners are getting attached and called (storeInput as well as their actual listener). Actually, storeInput should not be get called in this case

To debug issue, I commented out below two lines:

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

So there are no event listeners for .clear and .result buttons But still, storeInput listener gets called if they are clicked

Question is:

why document.querySelectorAll(".digit") and document.querySelectorAll(".operator") are adding event listeners to .clear and .result buttons as well?

 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

In forEach , this has no special meaning, so what you're really doing is attaching those handlers to window , since this defaults to window in loose mode. (You may have seen jQuery code using each ; jQuery sets this to each element in an each callback, but forEach doesn't work that way.)

To use the element within the forEach callback, accept the element as a parameter and use that parameter, see *** comments:

 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="=" />

---

Another option is to put a container around the digits, and another container around the operators, and just handle clicks on those containers, using the target property of the event object to see which digit or operator was clicked.

 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="=" />