Jquery mouseenter（）与mouseover（）的比较

因此，在阅读了最近的一份答复后，我不清楚我是否真的理解鼠标器和鼠标盖之间的区别。后国家

鼠标悬停：

将在进入元素和鼠标移动时触发 发生在元素中

鼠标指针：

将在进入元素时触发

我想出了一个同时使用这两种语言的方法，它们看起来非常相似。有人能给我解释一下这两者的区别吗

我还试着阅读JQuery定义，它们都说了同样的话

鼠标指针进入元素时，mouseover事件将发送到元素

当鼠标指针进入元素时，mouseenter事件被发送到元素

---

有人能举例说明吗？

请参阅jquery文档页面底部的示例代码和演示：

。。。鼠标悬停在指针移动到子元素时激发，如下所示 而mouseenter只有在指针移动到 绑定元素

---

您可以看到目标元素包含子元素时的行为：

每次鼠标进入或离开子元素时，都会触发mouseover，但不会触发mouseenter

$'my_div'.bindmouseover mouseenter，函数E{ 变量el=$+e.type； var n=+el.text； el.text++n； }; 我的分区{ 填充：0 20px 20px 0； 背景色：eee； 边缘底部：10px； 宽度：90px； 溢出：隐藏； } 我的分区>分区{ 浮动：左； 利润率：20px 0 0 20px； 高度：25px； 宽度：25px； 背景色：aaa； } 鼠标指针：0 鼠标悬停：0

---

尽管它们的操作方式相同，但mouseenter事件仅在鼠标指针进入选定元素时触发。如果鼠标指针同时输入任何子元素，则会触发mouseover事件。

mouseenter事件与mouseover在处理事件冒泡的方式上不同。mouseenter事件仅在鼠标进入其绑定到的元素时触发其处理程序，而不是后代。 参考：

mouseleave事件与mouseout的不同之处在于它处理事件冒泡的方式。mouseleave事件仅在鼠标离开绑定到的元素时触发其处理程序，而不是子代。

---

请参阅：

此示例演示了mousemove、mouseenter和mouseover事件之间的区别：

HTML:

JS:

onmousemove：每次将鼠标指针移到div元素上时发生。 onmouseenter：仅当鼠标指针进入div元素时发生。 onmouseover：当鼠标指针进入div元素时发生， 及其子元素p和span。

---

这是一个老问题，但仍然没有洞察imo的最新答案

由于jQuery对事件和处理程序使用Javascript措辞，但它自己对事件和处理程序进行了未记录但不同的解释，因此首先让我从纯Javascript的角度阐明其区别：

两个事件对 当鼠标移动速度超过浏览器采样位置时，鼠标可以从外部/外部元素“跳跃”到内部/最内部元素 任何进入/超越都会得到相应的离开/离开，可能是迟到/跳跃 事件转到指针下的可见元素不可见元素不能成为目标 鼠标器/鼠标器 不冒泡事件对委托处理程序不有用 事件注册本身定义了观察和抽象的领域 在目标区域上工作，如带池塘的公园：池塘被视为公园的一部分 每当第一次输入/离开元素本身或任何子体时，就会在目标/区域上发出事件 进入子体、从一个子体移动到另一个子体或移回目标不会完成/重新启动mouseenter/mouseleave循环，即没有触发事件 如果希望使用一个处理程序观察多个区域，请在每个区域/元素上注册它，或者使用下面讨论的另一个事件对 注册区域/元素的后代可以有自己的处理程序，创建一个独立的观察区域，其中包含独立的mouseenter/mouseleave事件周期 如果你想一想冒泡版本的mouseenter/mouseleave会是什么样子，你最终会得到mouseover/mouseout之类的东西 鼠标盖/鼠标出 事件泡沫 只要指针下面的元素发生更改，事件就会触发 先前采样的元素上的鼠标移出 然后在新元素上单击鼠标 事件不“嵌套”：例如，在孩子“吃多了”之前，父母将“离开” 目标/相关目标指示新的和以前的元素 如果你想看不同的地方 在一个公共父级或多个父级上注册一个处理程序，这些处理程序一起覆盖所有要监视的元素 在handler元素和目标元素之间查找您感兴趣的元素；可能$event.target.最近的。。。适合你的需要 不那么琐碎的mouseover/mouseout示例：

现在，所有浏览器都支持mouseover/mouseout和mouseenter/mouseleave 天生的。尽管如此，jQuery并没有将您的处理程序注册到mouseenter/mouseleave，而是在mouseover/mouseout周围的包装器中以静默方式将它们放置，如下代码所示

仿真是不必要的、不完善的，而且浪费了CPU周期：它过滤掉了mouseenter/mouseleave无法获得的mouseover/mouseout事件，但目标被弄乱了。真正的mouseenter/mouseleave会将handler元素作为目标，仿真可能会指示该元素的子元素，即mouseover/mouseout携带的任何内容

因此，我不对这些事件使用jQuery，但例如：

$el[0].addEventListener('mouseover', e => ...);

const list=document.getElementById'log'； const outer=document.getElementById'outer'； const$outer=$outer； 函数日志标记，事件{ const li=list.insertBeforedocument.createElement'li'，list.firstChild； //只有jQuery处理程序具有originalEvent 常数e=event.originalEvent | | event； 在${e.target.id}上追加`${tag}得到${e.type}； } addEventListener'mouseenter'，log.bindnull'，JSmouseenter'； $outer.on'mouseenter'，log.bindnull，$mouseenter'； div{ 利润率：20px； 边框：纯黑2px； } 内在的{ 最小高度：80px； }

---

中的演示在imo中显示得非常好。值得注意的是，mouseenter和mouseleave仅在IE中是专有事件，并由jQuery在其他浏览器中模拟。它们现在似乎在规范中，尽管尚未在其他浏览器中实现。请参阅@psychobrm-No的可能副本。使用这两个同样跟踪mouseleave事件的演示：如果over与enter+leave相同，则over的计数将是enter和leave的计数之和。是否有编写var n=+el.text的特定原因；而不是var n=el.text；？我只是出于好奇。@FredrickGauss-我使用+运算符将el.text返回的字符串强制为一个数字。我需要吗？不。在这种情况下，下一个使用n的语句也会将其强制为一个数字。那么，我为什么要用它呢？我不确定。。。这是两年前的事了。这是个好习惯。这使我的意图明确。可能在保存之前我最初有n+1，但决定将代码缩减2个字符，只使用++n。n+1不会将n强制为数字，而是将1强制为字符串，从而产生输出，例如011111。@gilly3-感谢您详细解释了您的思想旅行。@gilly3很好的总结，但有一点小小的改进：或离开子元素应该是或离开子元素，考虑到孩子和父母之间存在差距。您的fiddle有一个边距/边距，因此当您离开子元素时，确实会得到一个mouseover事件，但如果不使用边距/边距尝试，您将不会得到此事件。不知何故，JSFIDLE被打破，说函数未定义-我只是将所有js分叉并移动到

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

var x = 0;
var y = 0;
var 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;
}

$('.side-menu, .top-widget')
  .on('mouseover mouseout', event => {
    const target = event.type === 'mouseover' ? event.target : event.relatedTarget;
    const thing = $(target).closest('[data-thing]').attr('data-thing') || 'default';
    // do something with `thing`
  });

$el[0].addEventListener('mouseover', e => ...);