带有函数参数的 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调用。您正在调用您的函数（returns undefined），因此，您实际上是将 undefined 作为第二个参数传递。

一个可能的解决方案是让你的 fxIn 和 fxOut return 成为一个函数，这样你就可以像这样在 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>

带有函数参数的 querySelector 到 addEventListener

querySelector to addEventListener with function parameter

javascript

function

addeventlistener

queryselector