querySelector to addEventListener with function parameter

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>