asynchronous - Javascript, addEventListener callback function executes immediately and only once?

Question

I've noticed a difference between function and function() for addEventListener's callback. Which isn't a problem till I tried passing a parameter. Basically,

element.addEventListener("hover", logInput, false );
function logInput(){
    console.log('registered!');
}

works as intended, but adding parenthesis will cause it log immediately, without continual response to the event trigger:

element.addEventListener("hover", logInput(), false );
function logInput(){
    console.log('registered!');
}

Why is this? And how can I get it to work while passing a parameter such as:

element.addEventListener("hover", logOnInput(this), false );
function logOnInput(triggeredElement){
    console.log(triggeredElement);
}

Answer 1

Its a javascript when you want to call a function you use parentheses. Without parentheses outside a function is useless. But inside a function as argument you use the function without the parentheses so that when that event occurs then only it would run. If you call a function using parentheses inside function argument it will be executed immediately and would also run when the event occurs. To call a function with its parameters inside a function and just to invoke in that event you need to use the bind method like below:

element.addEventListener("hover", logOnInput.bind(null, argument1, argument2, etc), false );

However, if you want to select the context as this then I would recommend you to use like this:

function logOnInput(elem,arguments) {
  //now you can use **elem** to refer **this**
}

And use the anonymous function for the hover event like this:

element.addEventListener("hover", function(){
   logOnInput(this,arguments)
}, false );