首先補(bǔ)充個(gè)知識(shí)點(diǎn)：在發(fā)生mouseover和mouseout事件時(shí)，都會(huì)涉及把鼠標(biāo)從一個(gè)元素的邊界之內(nèi)移到另一個(gè)元素邊界之內(nèi)镶摘。
對(duì)mouseover事件而言嗽桩，事件的主目標(biāo)是獲得光標(biāo)的元素，而相關(guān)元素就是那個(gè)失去光標(biāo)的元素凄敢；類(lèi)似地碌冶，對(duì)mouseout事件而言，事件的主目標(biāo)是失去光標(biāo)的元素涝缝，而相關(guān)元素則是獲得光標(biāo)的元素种樱。
DOM通過(guò)event對(duì)象的relatedTarget屬性提供了相關(guān)元素的信息。這個(gè)屬性只對(duì)于mouseover和mouseout事件才包含值俊卤；對(duì)于其他事件，這個(gè)屬性的值是null害幅。 IE不支持realtedTarget屬性消恍，但提供了保存著同樣信息的不同屬性。在mouseover事件觸發(fā)時(shí)以现，IE的fromElement屬性中保存了相關(guān)元素狠怨；在mouseout事件觸發(fā)時(shí)，IE的toElement屬性中保存著相關(guān)元素邑遏。
obj.contains()方法佣赖，返回true或者false，當(dāng)obj集合中含有特定元素或?qū)ο髸r(shí)返回true记盒。
頁(yè)面布局如下：
<div id="div1">
<h2 id="h2">我是H2</h2>
</div>
js代碼如下：
window.onload = function (){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function (ev){
var oEvent = ev || event;
var from = oEvent.fromElement || oEvent.relatedTarget;
console.log(this);
if(this.contains(from)) return;
alert('移入div了');
};
oDiv.onmouseout = function (ev) {
var oEvent = ev || event;
var to = oEvent.toElement || oEvent.relatedTarget;
if(this.contains(to)) return;
alert('移除div1了');
};
};
展示效果：
給div加一個(gè)mouseover事件和一個(gè)mouseout事件憎蛤，當(dāng)鼠標(biāo)在div內(nèi)移入h2中（由于h2是div的子級(jí)，冒泡機(jī)制，h2移入時(shí)也會(huì)觸發(fā)div的mouseover事件）;當(dāng)鼠標(biāo)從h2移出時(shí)俩檬，相當(dāng)了從div移出萎胰，所以會(huì)觸發(fā)div的mouseout事件(判斷去哪)
