onmouseover and onmouseout event being triggered on page load not on events

Question

I have the following code:

var statusList = document.createElement('ul'); //I am populating this list elsewhere
statusList.style.display = 'none';
var statusSpan = document.createElement('span');
statusSpan.onmouseover = mapControlHover(statusList);
statusSpan.onmouseout = mapControlNoHover(statusList);

function mapControlHover(element) {
  element.style.display = 'block';
}

function mapControlNoHover(element) {
  element.style.display = 'none';
}

Both of the events are firing on page load (which they should not do). Neither are being fired onmouseover or onmouseout.

Please no jQuery in answers.

Answer 1

Yes that is because you are invoking the event

statusSpan.onmouseover = mapControlHover(statusList);

You should just pass-in the event handler function reference.

statusSpan.onmouseover = mapControlHover

and

function mapControlHover() {
  statusList.style.display = 'block'; //access statusList directly here.
}

You can also use function.bind, see for support and polyfill for IE < 9

 statusSpan.onmouseover = mapControlHover.bind(statusSpan, statusList);

and access

function mapControlHover(element) {
  element.style.display = 'block'; 
}