事件冒泡 以及onmouseenter 、 onmouseover(冒泡) 、onmousemove(冒泡)的區別
一. onmouseenter、onmouseover
onmouseenter 事件在滑鼠指標進入到繫結事件的那個元素上時觸發。
該事件通常與 onmouseleave(在滑鼠指標離開繫結事件的那個元素上時觸發) 事件一同使用。
onmouseenter 事件類似於 onmouseover 事件。 唯一的區別是 onmouseenter 事件不支援冒泡 。
二. 例項演示onmousemove, onmouseenter 和 mouseover 事件的不同
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; border: 1px solid black; margin: 10px; float: left; padding: 30px; text-align: center; background-color: lightgray; } p { background-color: white; } </style> </head> <body> <h3>該例項演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3> <p> onmousemove 事件在滑鼠移動到 div 元素上就開始時觸發,在這個div上移動一直觸發(冒泡)。</p> <p> mouseenter 事件中有在滑鼠指標進入 div 元素時觸發(不冒泡)。 </p> <p> onmouseover 事件在滑鼠指標進入 div 元素時觸發,在子元素上也會觸發(p 和 span)(冒泡)。</p> <hr> <div onmousemove="myMoveFunction()"> <p>onmousemove: <br> <span id="demo">滑鼠移動到我這!</span></p> </div> <div onmouseenter="myEnterFunction()"> <p>onmouseenter: <br> <span id="demo2">標移動到我這!</span></p> </div> <div onmouseover="myOverFunction()"> <p>onmouseover: <br> <span id="demo3">標移動到我這!</span></p> </div> </body> <script> var x = 0,y = 0,z = 0; function myMoveFunction() { document.getElementById("demo").innerHTML = z+=1; } function myEnterFunction() { document.getElementById("demo2").innerHTML = x+=1; } function myOverFunction() { document.getElementById("demo3").innerHTML = y+=1; } </script> </html> <!DOCTYPE html>
其中:
1. onmousemove 事件在滑鼠移動到 div 元素上時觸發,滑鼠在div、p、span元素內移動(即白框內也會觸發,事件冒泡到父級div);
2. mouseenter 事件中有在滑鼠指標進入 div 元素時觸發,滑鼠進入p、span元素內不會觸發,因為不支援事件冒泡;
3. onmouseover 事件在滑鼠指標進入 div 元素時觸發,在子元素上也會觸發(p 和 span),因為事件冒泡到父級div。
三. 事件冒泡
比如說父元素添加了onclick事件,當子元素髮生onclick事件時,父元素的onclick事件也會觸發。
四. 終止事件冒泡
方式一:
event.stopPropagation()
在子元素相應的處理函式內,加入 event.stopPropagation() ,終止事件的廣播分發,這樣事件停留在本節點,不會再往外傳播了。
方式二:
if(event.target == event.currentTarget) { ……}
事件包含最初觸發事件的節點引用 和 當前處理事件節點的引用,那如果節點只處理自己觸發的事件即可,不是自己產生的事件不處理。event.target 引用了產生此event物件的dom 節點,而event.currrentTarget 則引用了當前處理節點,我們可以通過這 兩個target 是否相等。event.target永遠是直接接受事件的目標DOM元素。
document.getElementById("box1").addEventListener("click",function(event){
if(event.target == event.currentTarget) {
alert("您好,我是最外層div。");
}
});
比較:
從事件傳遞上看:方法一在於取消事件冒泡,即當某些節點取消冒泡後,事件不會再向上傳遞;方法二在於不阻止冒泡,過濾需要處理的事件,事件處理後還會繼續傳遞;
分析方法二,既然事件是冒泡傳遞的,那可不可以讓某個父節點統一處理事件,通過判斷事件的發生地(即事件產生的節點),然後做出相應的處理呢?答案是可以的,下面通過給body 元素新增事件監聽,然後通過判斷event.target 然後對不同的target產生不同的行為。
window.onload = function() {
document.getElementById("body").addEventListener("click",eventPerformed()); }
function eventPerformed(event) {
var target = event.target;
switch (target.id) {
case "span":
alert("您好,我是span。");
break;
case "box2":
alert("您好,我是第二層div。");
break;
case "box1":
alert("您好,我是最外層div。");
break;
}
}
}
即將每一個元素都處理事件的模式改成有上層節點統一處理事件,通過事件發生的不同節點執行不同行為。這個模式,就是所謂的事件委託。