這兩天接觸了onmouseover事件和onmouseout事件，一直以為它們只是簡單的分別實(shí)現(xiàn)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)事件和在鼠標(biāo)指針移出指定的對(duì)象時(shí)觸發(fā)事件，但是突然發(fā)現(xiàn)這些只是對(duì)它們簡單的描述，下面讓我們一起看看它們終究還有神馬奇怪的特性，是好還是壞呢？

　　首先實(shí)現(xiàn)一個(gè)盒子：

　　給這個(gè)盒子上綁定上onmouseover事件和onmouseout事件

　　發(fā)現(xiàn)它們不會(huì)發(fā)生什么問題，然后（嘿嘿，你懂得?。?/p>

　　讓我們創(chuàng)建一個(gè)B元素，讓它被嵌套在A元素中，作為A的子元素

　　我們依舊只給外層父元素A綁定onmouseover事件和onmouseout事件，你會(huì)發(fā)現(xiàn)發(fā)生什么了呢？對(duì)，沒錯(cuò)！當(dāng)鼠標(biāo)移入移除A的子元素B的時(shí)候居然也發(fā)生了onmouseover事件和onmouseout事件?。hy？這不是我想要的！難道這時(shí)候B就不在是A的一部分了嗎？當(dāng)然不是，要不也不會(huì)在移入B元素時(shí)發(fā)生onmouseover事件。這樣證明，B元素還是A不可分割的一部分啊。

　　那到底是怎么回事呢？終究還是事件冒泡搞得鬼？大家都知道常用的瀏覽器中有兩種事件流：事件冒泡和事件捕獲。讓我們看一下事件冒泡的定義：事件按照從最特定的事件目標(biāo)逐級(jí)向上傳播到最不特定的事件目標(biāo)(document對(duì)象)的順序。所以說當(dāng)鼠標(biāo)移入移除A的子元素B的時(shí)候，B的onmouseover事件和onmouseout事件會(huì)觸發(fā)，但是它自己沒有這兩個(gè)事件啊，就把這兩個(gè)事件傳遞給了它的父元素A，A有這兩個(gè)事件所以就發(fā)生了我們看到的情況。

　　有人會(huì)說那怎么避免呢，畢竟不是所有人都會(huì)是這種需求嘛，我們只要父級(jí)元素的事件觸發(fā)就好，子級(jí)元素就讓它靜靜的當(dāng)個(gè)美男子就好了。

　　所以W3C在mouseover和mouseout事件中添加了relatedTarget屬性 ：

　　•在mouseover事件中，它表示鼠標(biāo)來自哪個(gè)元素
　　•在mouseout事件中，它指向鼠標(biāo)去往的那個(gè)元素

　　而而Microsoft在mouseover和mouseout事件中添加了兩個(gè)屬性

　　•fromElement，在mouseover事件中表示鼠標(biāo)來自哪個(gè)元素
　　•toElement，在mouseout事件中指向鼠標(biāo)去往的那個(gè)元素

　　所以我們就有了如下代碼的實(shí)現(xiàn)

document.getElementById('box1').onmouseover = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 這里可以編寫 onmouseenter 事件的處理代碼
alert('111');
}
}
document.getElementById('box1').onmouseout = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 這里可以編寫 onmouseleave 事件的處理代碼
alert('2222');
}
}

以上所述是小編給大家介紹的onmouseover事件和onmouseout事件的全面了解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論