現場的addEventListener的mouseenter

Question

我有jQuery的代碼：

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

如何創建相同，但與本地JavaScript（jQuery的沒有）？

我只需要Chrome兼容。

Answer 1

對於相同的功能，在這裏你可以添加多個事件偵聽到一個單一的元素，使用以下命令：

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

，將做完全一樣的。對於其他選擇：

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

與雖然委派mouseenter事件的問題是，它僅火災時，它應用的元素懸停。換句話說，如果將一個mouseenter事件附加到文檔中，就像在jQuery代碼中那樣，只有在用鼠標輸入document時纔會觸發，但對於任何子項都不會觸發。爲了使它對孩子有用，你需要使用mouseover。

Answer 2

這優化了舊版和新版瀏覽器的兼容性。

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