Javascript mouseover和mouseenter事件之间有什么区别？

我一直使用

mouseover

事件，但在阅读jQuery文档时，我发现

mouseenter

。它们的功能似乎完全相同

两者之间有区别吗？如果有，我应该在什么时候使用它们？

---

（也适用于

mouseout

和

mouseleave

）。

像这些问题一样，Quirksmode也有

---

我可以想象，因为jQuery的目标之一是使浏览器不可知，所以使用任一事件名称都会触发相同的行为。编辑：多亏了其他帖子，我现在发现情况并非如此，Mouseenter和mouseleave不会对事件冒泡做出反应，而mouseover和mouseout会做出反应

---

下面是一个描述行为的示例。

您可以从第页尝试以下示例。这是一个很好的互动演示，非常清晰，你可以自己看

var i=0；
美元（“部门超额”）
.mouseover（函数（）{
i+=1；
$（this.find（“span”）.text（“鼠标悬停在x+i上”）；
})
.mouseout（函数（）{
$（this.find（“span”）.text（“鼠标悬停”）；
});
var n=0；
$（“部门请假”）
.mouseenter（函数（）{
n+=1；
$（this.find（“span”）.text（“鼠标输入x”+n）；
})
.mouseleave（函数（）{
$（this.find（“span”）.text（“鼠标左键”）；
});
div.out{
宽度：40%；
高度：120px；
利润率：0.15px；
背景色：#d6edfc；
浮动：左；
}
分区{
宽度：60%；
身高：60%；
背景色：#fc0；
利润率：10px自动；
}
p{
线高：1米；
保证金：0；
填充：0；
}

移动鼠标
移动鼠标

鼠标指针“仅当鼠标从父元素移动到元素时才会出现”这不是真的。当鼠标从元素外部变为元素内部时，会发生此事件。鼠标来自哪个元素并不重要。的确，鼠标通常来自父母，但并不总是如此。例如，如果父项没有填充或边框，则鼠标可以直接从祖父母处进入，
mouseenter
仍将启动。事实上，它甚至可以从视口外部进入元素（如果元素正好位于边缘），事件仍会激发。演示是最好的解释；）如果你的元素没有子元素，但是如果元素确实有子元素，那么这对元素的行为就完全不同了。简言之，如果您将鼠标传递到一个元素中，然后传递到其子元素中，mouseover/mouseout都会启动，而只有mouseenter会启动，因为从技术上讲，您的鼠标仍在元素中。我相信这里的事件名称是错误的。这很好地解释了这一点：mouseover每次从容器中启动时都会启动，因为事件冒泡。
$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });