javascript - 我们如何使用 `mouseover` 和 `mouseout` 事件？

Question

正如 JQuery 文档所说，我已将许多行 mouseover 转换为 mouseenter，因为它不会触发超过一次。

http://api.jquery.com/mouseover/

mouseover fires when the pointer moves into the child element as well

mouseenter fires only when the pointer moves into the bound element.

即使是 hover 事件也作为 mouseenter 和 mouseleave，而不是 mouseover 和 mouseout。

这让我想知道如果 mouseenter 可以做到这一切，为什么会有 mouseover 事件。

对我来说，当您在元素上移动鼠标时，mouseover 会意外触发。它似乎真的取决于子元素的深度。

mouseover 和 mouseout 是否需要触发多次？

Answer 1

据我所知，mouseover/mouseout 根本没有用例。它们存在的唯一原因是因为这些事件是由浏览器触发的，因为 they are in the standard DOM event list . mouseenter 和 mouseleave 不是标准事件，但它们是特定于 jQuery 的结构。

我想一个用例是，如果您希望在将鼠标移出事件绑定(bind)到的元素的子元素上方或移出时触发事件。我想不出任何具体的东西，但至少这个功能是可用的。如果只有 mouseenter/mouseleave 存在，您就别无选择。

来自 http://code.jquery.com/jquery-1.9.1.js :

jQuery.each({
    mouseenter: "mouseover",
    mouseleave: "mouseout"
}, function( orig, fix ) {
    /* content snipped */

推测:jQuery 的创建者创建 mouseenter 和 mouseleave 非标准事件的原因是因为它们的行为与您期望的 mouseover/mouseout 事件起作用(即不考虑后代)。