好像各大类库中jQuery是最后支持这两东东的,关于它们的优势可以参考reglib类库作者的一篇博文《Goodbye mouseover, hello mouseenter》。我们可以在IE观察下它的效果。
注意,我们在红色与蓝色之间移动,并没有触发outer元素的mouseenter事件。无错,它们与mouseover,mouseout最大的区别是它们不会冒泡。
下面试图用mouseover与mouseout模拟mouseenter与mouseleave。
function addEvent(el, type, handler, capture) { if (typeof el.addEventListener != 'undefined') { if (type === 'mouseenter') { el.addEventListener('mouseover', withinElement(handler), capture); } else if (type === 'mouseleave') { el.addEventListener('mouseout', withinElement(handler), capture); } else { el.addEventListener(type, handler, capture); } } else if (typeof el.attachEvent != 'undefined') { el.attachEvent('on' + type, handler); } else { el['on' + type] = handler; } } function withinElement(handler) { return function (e) { var parent = e.relatedTarget; while ( parent && parent != this ) { try { parent = parent.parentNode; } catch(e) { break; } } if ( parent != this ) handler.call(this, e); }; }; var $ = function(id){ return document.getElementById(id); } window.onload = function(){ function myFn(e){ e = e || window.event; var target = e.target ? e.target : e.srcElement; if(target.nodeType === 3){ target = target.parentNode; } $('memo').innerHTML = e.type + ': ' + target.id; }; addEvent($("inner"),"mouseenter",myFn,false); addEvent($("inner"),"mouseleave",myFn,false); addEvent($("outer"),"mouseenter",myFn,false); }
看看jQuery的实现,它用了一个冒牌事件对象,因此我们可以在FF中用e.type能打印出mouseenter,除此与上面没多大改善。