addEventListener 不与'this'一起使用

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

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

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和我只是在同一时间发布了相同的编辑：-）

Answer 2

你需要传递一个匿名函数，否则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);