JavaScript中出现Cannot set properties of undefined(设置背景色)错误的原因

错误原因 #

你触发「Cannot set properties of undefined」错误的核心问题是：在调用addEventListener时，错误地立即执行了changeColor函数，而非传递函数本身作为事件回调。

当你写changeColor()时，函数会在代码执行到这一行时立刻运行，此时函数内部的this在非严格模式下指向window对象，严格模式下则是undefined——无论哪种情况，都不是你期望的触发事件的DOM元素，所以访问this.style必然会报错。同时，事件监听实际绑定的是函数执行后的返回值（这里函数无返回值，即undefined），导致后续点击元素时不会触发任何逻辑。

解决方法 #

只需要去掉changeColor后面的括号，传递函数引用给addEventListener即可。这样当事件触发时，浏览器会自动调用该函数，并将this指向触发事件的DOM元素：

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);

补充提示 #

如果后续需要给回调函数传递自定义参数，才需要用匿名函数包裹，比如：

btn.addEventListener("click", () => changeColor("customParam"));

但在当前场景下，直接传递函数引用就能满足需求。

内容的提问来源于stack exchange，提问作者Nabin Bista