如何传递触发事件的元素并更改其属性?

时间:2019-04-20 15:59:38

标签: javascript dom mouseevent this dom-events

我正在尝试更改background-color元素的<div>。元素触发事件,并通过this调用包含该元素作为参数的函数。

如何更改元素属性?

我尝试将传递的元素分配给变量以及其他我不记得的尝试和错误方法。

newDiv = document.addEventListener('mouseover', doSomething(this));

// Some code here

function doSomething(item)
{
  item.style.backgroundColor = '#FFFFFF';
}

我希望元素的背景色更改为#FFFFFF,但出现以下错误消息:TypeError: item.style is undefined

1 个答案:

答案 0 :(得分:0)

doSomething(this)的方式调用该函数是不可行的。您实际上是在绑定从函数doSomething返回的值。

js引擎会自动将触发事件的元素绑定为词法上下文,因此您可以使用this上下文:

this.style.backgroundColor = '#FFFFFF';

或者,您可以使用在处理程序中作为参数传递的事件:

document.addEventListener('mouseover', doSomething);
function doSomething(e) {
   e.target.style.backgroundColor = '#FFFFFF';
}