1. onmouseenter
onmouseenter 事件在鼠標指針移動到元素上時觸發。
該事件通常與 onmouseleave 事件一同使用, 在鼠標指針移出元素上時觸發。
onmouseenter 事件類似於 onmouseover 事件。 唯一的區別是 onmouseenter 事件不支持冒泡 。
2. 實例演示onmousemove, onmouseenter 和 mouseover 事件的不同
<!DOCTYPE html>
<html>
<head>
<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 元素上時觸發。</p>
<p> mouseenter 事件中有在鼠標指針進入 div 元素時觸發。 </p>
<p> onmouseover 事件在鼠標指針進入 div 元素時觸發,在子元素上也會觸發(p 和 span)。</p>
<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>
<script>
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>
</body>
</html>
其中：
1. onmousemove 事件在鼠標移動到 div 元素上時觸發，鼠標在p元素內移動（即白框內也會觸發，事件冒泡到父級div）；
2. mouseenter 事件中有在鼠標指針進入 div 元素時觸發，鼠標進入p元素內不會觸發，因爲不支持事件冒泡；
3. onmouseover 事件在鼠標指針進入 div 元素時觸發,在子元素上也會觸發(p 和 span)，因爲事件冒泡到父級div。
參考解析Javascript事件冒泡機制：http://blog.csdn.net/luanlouis/article/details/23927347
3. 事件冒泡
比如說父元素添加了onclick事件，當子元素髮生onclick事件時，父元素的onclick事件也會觸發。
4. 終止事件冒泡
- 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;
}
} 即將每一個元素都處理事件的模式改成有上層節點統一處理事件，通過事件發生的不同節點執行不同行爲。這個模式，就是所謂的事件委託。