比较在jQuery中绑定mouseleave事件和mouseenter事件的方法

Question

我希望在我的鼠标进入div时触发事件,并在使用jQuery离开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经常需要监听nx 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上调用"mouseleave"事件.在这种情况下,我认为两个场景都必须跟踪nx 2事件,但只有当鼠标悬停在最内层的div上时.

---

现在,这提出了另一个问题,即绑定和取消绑定事件需要多少开销.我想我曾经读过jQuery将所有事件保留在队列中,尽管在研究这个问题时我无法找到确认的具体文档.因此,根据所使用的数据结构,排队/出队可能具有O(1)或O(n)成本.有人知道这具体细节吗？

在方案1中,您可以预先绑定所有内容,而不必再将其弄乱(除非将新的div.mouse-traps动态添加到页面中).这是发生的nx 2绑定.

在方案2中,您只预先绑定n个事件,但理论上可以没有限制您使用鼠标进入和离开区域的次数.这些创造了必要的无限绑定的可能性.但是在同样的方面,鼠标(以及操作该鼠标的人)只能移动得如此之快,因此这些绑定也会在更长的时间内展开.这可以最大限度地减少众多绑定的影响.

---

所有这些都说,我认为第二种情况可能更好,但我是否忽略了别的东西？是否有其他方法可以比我列出的更好？

我为这篇文章的篇幅感到抱歉.我只是想确保我详细阐述了我目前的思考过程.我正在研究一些会有大量鼠标事件的东西,并希望确保我能够很好地使用人们的系统.

Answer 1

将所有内容包装.mouse-trap在 中div，仅将事件绑定一次并用于event.target处理它。

作为旁注 - 您应该对其进行分析并查看哪种解决方案最适合您。