无法在未定义的设置中设置属性

Question

为什么我无法在 JavaScript 代码中设置未定义设置（背景颜色）的属性。

let btn = document.querySelector('button');
let h1 = document.querySelector('h1');
let h2 = document.querySelector('h2');
let p = document.querySelector('p');

function changeColor () {
    console.dir(this.innerText);
    this.style.backgroundColor = "blue";
}

btn.addEventListener("click", changeColor());

h1.addEventListener("click", changeColor());

h2.addEventListener("click", changeColor());

p.addEventListener("click", changeColor());

Answer 1

通过删除changeColor后面的括号()，您可以将函数引用本身传递给addEventListener，而不是立即执行该函数。这应该可以解决您遇到的错误。

btn.addEventListener("click", changeColor);
h1.addEventListener("click", changeColor);
h2.addEventListener("click", changeColor);
p.addEventListener("click", changeColor);