javascript - querySelector 到带有函数参数的 addEventListener

Question

我尝试传递变量sel1作为函数fxIn的参数。
但是事件没有被触发，因为这在控制台中没有错误，我不知道发生了什么。

var sel1 = window.document.querySelector('#item1')
sel1.addEventListener('mouseover', fxIn(sel1))
sel1.addEventListener('mouseout', fxOut(sel1))

功能是:

// change bg color
function fxIn(selectorX){
    selectorX.style.background = 'red'
}

// reset bg color
function fxOut(){
    selectorX.style.background = ''
}

为什么这不起作用？输出期望是当鼠标悬停在 div 标签上时背景颜色发生变化。

Answer 1

您可以在匿名函数内部调用该函数。

sel1.addEventListener('mouseover', function(){ fxIn(sel1) })

尽管您不需要传递附加事件的同一对象。您可以简单地使用 this 直接引用该对象:

var sel1 = window.document.querySelector('#item1')
sel1.addEventListener('mouseover', fxIn);
sel1.addEventListener('mouseout', fxOut);


// change bg color
function fxIn(){
    this.style.background = 'red'
}

// reset bg color
function fxOut(){
    this.style.background = ''
}

#item1{
  width: 200px;
  height: 200px;
}

<div id="item1">Container</div>