javascript - 突出显示悬停元素的事件？

Question

我目前正在使用此代码在 Google Chrome 扩展程序中绑定(bind)事件:

var bindEvent = function(elem ,evt,cb) {
    //see if the addEventListener function exists on the element
    if ( elem.addEventListener ) {
        elem.addEventListener(evt,cb,false);
    //if addEventListener is not present, see if this is an IE browser
    } else if ( elem.attachEvent ) {
        //prefix the event type with "on"
        elem.attachEvent('on' + evt, function(){
            /* use call to simulate addEventListener
             * This will make sure the callback gets the element for "this"
             * and will ensure the function's first argument is the event object
             */
             cb.call(event.srcElement,event);
        });
    }
};

/* ... */

bindEvent(document,'click', function(event) 
{ var target = event.target || event.srcElement;
    
    /*Code to do stuff about a clicked element*/

    this.removeEventListener('click',arguments.callee,false);
});

并且它与点击事件配合得很好。现在，我的问题是:我可以使用什么事件来更改悬停元素而不是简单单击的元素的某些内容？最终目标是更改光标悬停的元素的背景颜色。

我尝试了mouseover、mouseenter、focus和focusin但没有成功。确切地说，我尝试在事件触发时执行 console.log() ，但它从未真正发生过，除了有一次我单击一个对话框并检测到我对该元素的关注时.

我目前使用的是 Chrome (v24.0)，但跨浏览器解决方案将是一个很好的功能，因为我计划稍后在 Firefox 上重用该脚本。但这不是首要任务。

Answer 1

与悬停相关的事件是 mouseover 和 mouseout - 它们分别在鼠标进入或离开元素时触发。但是，由于您附加监听器的元素的子元素也会触发该事件，并且这些事件会冒泡，因此您还必须检查 event.target:

elem.addEventListener("mouseover", function(event) {
  if (event.target == elem) {
    // Mouse pointer entered elem
  }
}, false);

elem.addEventListener("mouseout", function(event) {
  if (event.target == elem) {
    // Mouse pointer left elem
  }
}, false);