javascript - 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. Thanks

Answer 1

是的，那是因为您正在调用该事件

statusSpan.onmouseover = mapControlHover(statusList);

您应该只传入事件处理函数引用。

statusSpan.onmouseover = mapControlHover

和

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

您还可以使用function.bind，请参阅 IE < 9 的支持和 polyfill

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

和访问

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