jquery之比较 jQuery 中绑定(bind) mouseleave 事件和 mouseenter 事件的方法_编程设计

我想使用 jQuery 在鼠标进入 div 时触发一个事件，并在离开 div 时触发一个单独的事件。我知道有很多插件、代码示例等可以解决这个特定问题。我只是好奇哪种方式在性能和内存管理方面最有效。

例如，假设我们有这样的 HTML 代码:

<div class="mouse-trap"> 1   </div> 
<div class="mouse-trap"> 2   </div> 
... 
<div class="mouse-trap"> n-1 </div> 
<div class="mouse-trap"> n   </div>

<小时 />

<强> 1。单独的事件

我们可以单独维护事件。此代码可读且易于使用。

$(".mouse-trap").bind('mouseenter', function() { 
    // mouse came in 
}); 
 
$(".mouse-trap").bind('mouseleave', function() { 
    // mouse left 
});

<强> 2。嵌套事件

不要总是保留“mouseleave”事件，而是只在必要时创建它，然后在完成后将其丢弃，因为每个 mouseenter 事件只会有一个 mouseleave 事件。

$(".mouse-trap").bind('mouseenter', function() { 
    // mouse came in 
 
    $(this).one('mouseleave', function() { 
        // mouse left 
    }); 
});

<小时 />

在第一种情况下，如果您有 n 个事件，这意味着 jQuery 必须不断监听 n x 2事件。

在第二种情况下，假设 div 没有相互嵌套，您只会在任何给定点监听 n + 1 事件。

诚然，我不确定事件查找到底需要多少时间，但我怀疑从浏览器到浏览器、从计算机到计算机，情况都会有所不同。对于相对较小的 n 值，这可能永远不会成为问题。但是如果 n 真的很大怎么办？会有明显差异吗？
<小时 />
现在，如果可以将 div 相互嵌套，情况会发生怎样的变化？

例如:

<div class="mouse-trap"> <div class="mouse-trap"> <div class="mouse-trap"> ... </div> <div class="mouse-trap"> ... </div> </div> ... <div class="mouse-trap"> ... </div> </div>

最糟糕的情况是 n 个 div 相互嵌套。

因为它们是嵌套的，所以我相信当您向内移动时，外部 div 不会调用“mouseleave”事件。在这种情况下，我相信这两种情况都必须跟踪 n x 2 事件，但仅限于将鼠标悬停在最内部的 div 上时。
<小时 />
现在这又带来了另一个问题:绑定(bind)和取消绑定(bind)事件需要多少开销。我想我不久前读到过 jQuery 将所有事件保留在队列中，尽管在研究这个问题时我无法找到确认这一点的具体文档。因此，根据所使用的数据结构，排队/出队可能有 O(1) 或 O(n) 成本。有谁知道这个的具体情况吗？

在场景 1 中，您可以预先绑定(bind)所有内容，而不必再搞乱它(除非新的 div.mouse-traps 动态添加到页面中)。发生了 n x 2 次绑定(bind)。

在场景 2 中，您仅预先绑定(bind) n 个事件，但理论上您使用鼠标进入和离开某个区域的次数没有限制。这些为必要的无限绑定(bind)创造了可能性。但同样地，鼠标(以及操作该鼠标的人)只能快速移动，因此这些绑定(bind)也都分散在更长的时间内。这可以最大限度地减少大量绑定(bind)的影响。
<小时 />
综上所述，我认为第二种情况可能更好，但我是否忽略了其他事情？还有其他方法比我列出的两种方法更好吗？

对于这篇文章的冗长，我深表歉意。我只是想确保我详细阐述了我当前的思维过程。我正在开发一些需要大量鼠标事件的项目，并希望确保我能很好地与人们的系统配合使用。

请您参考如下方法:

将所有 .mouse-trap 包裹在 div 中，仅在其上绑定(bind)一次事件并使用 event.target来处理它。
<小时 />
顺便说一句 - 您应该对其进行分析并查看哪种解决方案最适合您。