单击“ EventListener”在加载时发生的，而不是单击

Question

我在单击p元素时试图更改drumkey类的背景色。但是，加载页面而不是onClick时，它会立即应用。

var keyEl = document.getElementsByClassName("drumKey");
var x = document.getElementsByTagName("p");
for (i = 0; i < x.length; i++) {
    x[i].addEventListener("click", colorChange(i));
}
function colorChange(i) {
    keyEl[i].style.backgroundColor = "red";
}

Answer 1

这是因为addEventListener需要function作为第二个参数，并且您正在呼吁执行函数而不是返回函数。

请记住，功能是JavaScript中的对象。您可以返回这样的函数：

var keyEl = document.getElementsByClassName("drumKey");
var x = document.getElementsByTagName("p");
for (i = 0; i < x.length; i++) {
    x[i].addEventListener("click", colorChange(i));
}
function colorChange(i) {
  return function(){
    keyEl[i].style.backgroundColor = "red";
  }    
}

<div class="drumKey">This is div 1</div>
<div class="drumKey">This is div 2</div>
<div class="drumKey">This is div 3</div>
<div class="drumKey">This is div 4</div>
<p>Click here to change the background color to red of Div 1</p>
<p>Click here to change the background color to red of Div 2</p>
<p>Click here to change the background color to red of Div 3</p>
<p>Click here to change the background color to red of Div 4</p>

Answer 2

所以，分配事件时要调用函数的错误，但是您需要返回它，如

x[i].addEventListener("click", (i) => colorChange(i));