javascript - document.querySelectorAll 奇怪的行为

Question

我有一个像下面这样的简单 HTML 和相应的 java 脚本代码。

问题是:

对于 .clear 和 .result buttons ，两个事件监听器被附加和调用(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。 (您可能已经看到 jQuery 代码使用 each；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="=" />

---

另一种选择是在数字周围放置一个容器，在运算符周围放置另一个容器，只处理对这些容器的点击，使用事件对象的 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="=" />