Question

I want to trigger an event when my mouse enters a div, and a separate event when it leaves the div using jQuery. I know there are plenty of plugins, code samples, etc. that solve this particular problem. I’m just curious which way would be most efficient in terms of both performance and memory management.

So for instance, assume we have HTML code like this:

<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. Separate events

We can maintain the events separately. This code is readable, and easy to work with.

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

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

2. Nested events

Instead of always keeping a “mouseleave” event around, only create it when it’s necessary and then trash it when we’re done, since there will only ever be one mouseleave event for each mouseenter event.

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

    $(this).one('mouseleave', function() {
        // mouse left
    });
});

---

In the first scenario if you have n events, this means jQuery is constantly have to listen for n x 2 events.

In the second scenario, assuming the div’s aren’t nested inside each other, you’re only listening for n + 1 events at any given point.

Admittedly I’m not sure exactly how much time is involved with event lookups, but I’d suspect from browser to browser, and computer to computer it would be different. For a relatively small value of n this would probably never be an issue. But what if n was really large? Would there be a noticeable difference?

---

Now, how do things change if you can have divs nested inside of each other?

For example:

<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>

The worst case scenario here would be n divs nested inside each other.

Because they are nested, I believe the “mouseleave” event won’t get called on the outer divs as you move inwards. In this case I believe both scenarios would have to keep track of n x 2 events, but only when mousing over the inner-most div.

---

Now this brings up another question of how much overhead is required to bind and unbind events. I thought I read a while back that jQuery keeps all events in a queue, although I wasn’t able to find specific documentation confirming that when researching this issue. So depending on the data structure used, the queuing/dequeuing probably has either a O(1) or O(n) cost. Does anybody know the specifics of this?

In scenario 1, you bind everything once up front and you don’t have to mess with it anymore (barring new div.mouse-traps getting dynamically added to the page). That’s n x 2 bindings that take place.

In scenario 2, you only bind n events up front, but there could theoretically be no limit to how many times you enter and leave an area with your mouse. These creates a possibility for infinite bindings necessary. But in the same respect, a mouse (and the human that operates that mouse) can only move so quickly, so these bindings are also all spread out over a greater period of time. This could minimize the effect of the numerous bindings.

---

All of that to say, I think the second scenario is probably better, but am I overlooking something else? Are there other ways of doing it that are better than the two that I listed?

I apologize for the lengthiness of this post. I just wanted to make sure I elaborated on my current thought process. I’m working on something that will have a large number of mouse events and want to make sure I play nicely with people’s systems.

Answer 1

Wrap all .mouse-trap in div, bind the events only once on that and use event.target to handle it.

---

As a side note – you should profile it and see which solution it the best for you.