javascript - 使用功能参数的addSelectListener的querySelector

我尝试将变量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标签上时，输出预期将具有更改的背景色。

最佳答案

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

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>