使用 function 参数添加事件监听器的 querySelector

Question

I try to pass a variable sel1 as parameter of function fxIn .
But event is not trigger, since this get no error in console, I don`t know what is going on.

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

the functions are:

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

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

Why this don`t work? the output expect is to have background color changed when mouse is over a div tag.

Answer 1

You can call the function inside of an anonymous function.

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

Though you do not need to pass the same object on which you are attaching the event. You can simply use this to refer the object directly:

 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

The second argument of addEventListener is expected to be a function, which can then be called by JS when the event occurs. You're calling your function (which returns undefined ), so, you're actually passing undefined as the second argument.

One possible solution would be to make your fxIn and fxOut return a function so that you can use it in the context of addEventListener like so:

 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

Since the other others have the key points covered, here's an alternative solution that uses classList to toggle classes to the element.

 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>