Question

我一直致力于一个涉及生成和更改<div>的项目。无论如何，对于我正在使用的80个div来说，<div id="drawn" onclick="changeColor(this)"></div>是一件很痛苦的事。

我决定使用addEventListener()函数来启用点击时发生的事件。

我想要做的是点击<div>时，它的背景颜色会发生变化。

当我尝试使用的代码时，我在Javascript控制台中获得了Uncaught TypeError: Cannot set property 'backgroundColor' of undefined ' of null。

这是我的代码：

function color(elment) {

elment.style.backgroundColor="orange"

}

document.getElementById("drawn").addEventListener("click", color(this), false)

导致此代码出错的原因是什么？

Answer 1

您需要传递一个匿名函数，否则this的上下文不是window元素：

document.getElementById("drawn").addEventListener("click", function(){
  color(this);
}, false);

您可以做的只是使用color函数中的上下文：

function color() {
  this.style.backgroundColor = "orange";
}

document.getElementById("drawn").addEventListener("click", color, false);

Answer 2

这是因为您不会影响事件的函数处理程序，而是执行它。试试这个：

document.getElementById("drawn").addEventListener("click", function() { color(this); }, false)

但是，由于你有80个div，从资源的角度来看，最好定义一个特定的函数，用于自动更改父div的颜色，而不需要参数：

function changeDivColor() {
    this.style.backgroundColor="orange"
}

然后：

document.getElementById("drawn").addEventListener("click", changeDivColor, false);

会导致80个div调用相同的处理程序，而以前的系统会使80个匿名处理程序执行基本相同的操作。

编辑：有趣的@elclanrs和我刚刚在同一时间发布相同的编辑： - ）