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>

Answer 2

的第二个参数addEventListener应该是一个函数，然后可以在事件发生时被 JS 调用。你正在调用你的函数（它返回undefined），所以，你实际上是undefined作为第二个参数传递的。

一种可能的解决方案是让你的fxIn并fxOut返回一个函数，以便你可以在这样的上下文中使用它addEventListener：

const fxIn = selectorX => e => selectorX.style.background = 'red';
const fxOut = selectorX => e => selectorX.style.background = '';

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

<p id="item1">Item 1</p>

Answer 3

由于其他人已经涵盖了关键点，因此这里有一个替代解决方案，用于classList将类切换到元素。

const sel1 = document.querySelector('#item1');

function toggle() {
  this.classList.toggle('red');
}

sel1.addEventListener('mouseover', toggle);
sel1.addEventListener('mouseout', toggle);

#item1 { width: 200px; height: 200px; }
.red { background-color: red; }

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