先了解幾個事件對象屬性
target 指事件源對象，點擊嵌套元素最裡層的某元素，該元素就是target。IE6/7/8對應的是srcElement。
currentTarget 指添加事件handler的元素本身，如el.addEventListener中el就是currentTarget。IE6/7/8沒有對應屬性，可在handler內使用this來替代如evt.currentTarget = this。
relativeTarget 指事件相關的元素，一般用在mouseover，mouseout事件中。IE6/7/8中對應的是fromElement，toElement。
mouseenter ，mouseleave IE9中仍然支持，另見 Greg Reimer 的博文 Goodbye mouseover, hello mouseenter 。
mouseenter與mouseover區別在於：在元素內部移動時mouseenter不會觸發。如下
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mouseerter與mouseover區別(IE下測試)</title>
</head>
<body>
<div id="result" style="position:absolute;right:100px;top:5px;width:250px;height:400px;border:2px solid gray;overflow:auto;">
</div>
<h3>1，鼠標在div[id=parent1]內部移動時也會觸發mouseover事件</h3>
<div id="parent1" style="width:400px;border:1px solid gray;padding:5px;">
<div id="child11" style="width:100px;height:100px;background:gold;float:left;">Child11</div>
<div id="child12" style="width:100px;height:100px;background:gold;float:right;">Child12</div>
<div style="clear:both;"></div>
</div>
<br/>
<h3>2，鼠標在div[id=parent2]內部移動時也不會觸發mouseenter事件</h3>
<div id="parent2" style="width:400px;border:1px solid gray;padding:5px;">
<div id="child21" style="width:100px;height:100px;background:gold;float:left;">Child21</div>
<div id="child22" style="width:100px;height:100px;background:gold;float:right;">Child22</div>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
function on(el,type,fn){
el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);
}
function $(id){
return document.getElementById(id);
}
var p1 = $('parent1'),
p2 = $('parent2');
function fn(e){
var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);
}
on(p1,'mouseover',fn);
on(p2,'mouseenter',fn);
</script>
<body>
</html>
了解了這三個屬性的意義後，實現起來就簡單了：
復制代碼 代碼如下:
E = function(){
function elContains(a, b){
try{
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}catch(e){}
}
function addEvt(el, type, fn){
function fun(e){
var a = e.currentTarget, b = e.relatedTarget;
if(!elContains(a, b) && a!=b){
fn.call(e.currentTarget,e);
}
}
if(el.addEventListener){
if(type=='mouseenter'){
el.addEventListener('mouseover', fun, false);
}else if(type=='mouseleave'){
el.addEventListener('mouseout', fun, false);
}else{
el.addEventListener(type, fn, false);
}
}else{
el.attachEvent('on' + type, fn);
}
}
return {addEvt:addEvt};
}();
測試代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]