Event for highlighting the hovered element?

Question

I'm currently using this code to bind events in a Google Chrome extension:

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);
});

And it works well with the click event. Now, my question is: what event could I use to change something about an element being hovered and not simply clicked on? The final goal would be to change the background color of the element being hovered by the cursor.

I tried mouseover, mouseenter, focus and focusin to no avail. To be exact, I tried to do a console.log() when the event triggers, but it never really happened, except one time when I clicked on a dialog box and it detected my focus on this element.

I currently am using Chrome (v24.0), but a cross-browser solution would be a nice feature because I plan to reuse the script on Firefox later. It's not a top priority though.

Why are you checking for `elem.attachEvent`? No need to shim for IE8 if you're building a Google Chrome extension... — Benjamin Gruenbaum, May 30 '13 at 15:24
@BenjaminGruenbaum Well... you never know. What if the Chrome extension system is ported to old IE versions ? What would *you* do then ? — Denys Séguret, May 30 '13 at 15:25

score 2 · Accepted Answer · answered May 30 '13 at 15:25

2

The relevant events for hovering are mouseover and mouseout - they are triggered when the mouse enters or leaves an element respectively. However, since that event is also triggered for the child elements of the element you attached your listener on and these events bubble up, you also have to check 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);

answered May 30 '13 at 15:25

Wladimir Palant

56,865
12
98
126

@BenjaminGruenbaum Even if modern browsers default the 3rd parameter, why wouldn't you include it to be safe for "legacy" support? It doesn't hurt anything – Ian May 30 '13 at 15:39
Thank you, I don't know if I missed something when I first tested `mouseover` or if `mouseover` can't be used without `mouseout`, but together, they work quite well. However, is it normal that in `bindEvent(document,'mouseover', function(event) { var target = event.target || event.srcElement; /* code to change hovered element here */ });` Or the equivalent with `mouseout`, `target.style.backgroundColor` always returns `rgb(255, 255, 255)` ? (`.background` too) – Caramel Truffle May 31 '13 at 13:00

Event for highlighting the hovered element?

1 Answers1