admin管理员组

文章数量:1323157

I have jQuery's code:

$(document).on("mouseenter","a",function(e){
    //...
});

How create the same but with native JavaScript (without jQuery)?

I need only Chrome patible.

I have jQuery's code:

$(document).on("mouseenter","a",function(e){
    //...
});

How create the same but with native JavaScript (without jQuery)?

I need only Chrome patible.

• javascript
• jquery
• google-chrome
• addeventlistener

Share Follow edited Jan 25, 2014 at 15:08 holden321 asked Jan 25, 2014 at 15:00 holden321holden321 1,18333 gold badges1919 silver badges3333 bronze badges 5

• 1 Dude... talking about cross-browser and stuff, the correct answer to that would be quite long! – jAndy Commented Jan 25, 2014 at 15:03
• possible duplicate of JavaScript Event Delegation - Behavior – Ram Commented Jan 25, 2014 at 15:04
• Event delegation..OMG..Very long ans to copy and paste.. – Deepak Ingole Commented Jan 25, 2014 at 15:05
• Talking about cross-browser's solution - I need it work only in Chrome. – holden321 Commented Jan 25, 2014 at 15:06
• Ok, how to make it "live"? – holden321 Commented Jan 25, 2014 at 15:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

For the same functionality, where you can add multiple event listeners to a single element, use the following:

addEventListener('mouseover', function(e) {
    if (e.target instanceof HTMLAnchorElement) {
        //...
    }
});

That will do the exact same. For other selectors:

addEventListener('mouseover', function(e) {
    if (e.target instanceof HTMLAnchorElement) {
        //matches if the element is an <a>
    }
    if (e.target.className.match(/(\s|^)foobar(\s|$)/)) {
        //matches if the element has the class "foobar" in its classes list
    }
    if (e.target.id == 'baz') {
        //matches if the element has an id of "baz"
        //same syntax works for attributes like 'name', 'href', 'title', etc.
    }
    if (e.target instanceof HTMLLabelElement && e.target.attributes.for.value == 'baz') {
        //matches a <label> tag that has its 'for' attribute set to 'baz'
        //the element.attributes.attrName.value is the syntax for getting the value
        //    of any attribute that isn't available otherwise
    }
});

The problem with delegating the mouseenter event though is that it only fires when the element it is applied to is hovered over. In other words, if you attach a mouseenter event to the document, like in your jQuery code, it will only fire when the document is entered with the mouse, but not for any of the children. For making it work on the children, you'll need to use mouseover.

This optimizes patibility across old and new browsers.

Live Demo

var links = document.links || document.anchors || document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    addEvent(links[i], 'mouseenter', action);
}

function addEvent(element, myEvent, fnc) {
    return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
}

function action(evt) {
    var e = evt || window.event,
        link = (e.currentTarget) ? e.currentTarget : e.srcElement;
    link.style.color = "lime";
}

本文标签： javascriptlive addEventListener mouseenterStack Overflow