Geek Answers Handbook

Comparing methods for binding a mouseleave event to a mouseenter event in jQuery

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 that there are many plugins, code examples, etc. that solve this particular problem. I'm just wondering which path would be most efficient in terms of performance and memory management.

So, for example, suppose we have HTML code:

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

We can support events separately. This code is readable and easy to use.

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

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

2. Nested events

, "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 ? ?

, , divs?

:

<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 divs, .

, , "mouseleave" div, . , n x 2, div.

, . , , jQuery , , , . , /dequeuing, , O (1), O (n). - ?

1 , ( div.mouse ). n x 2 , .

2 n , , . . ( , ) , . .

, , , , , , - ? , , , ?

. , . , , .

+5
5

.mouse-trap div, event.target, .

- , .

+3

:

jQuery.fn.mouse_trap=function(f1,f2)
{ 
 var obj=$(this);
 obj.one('mouseenter',function(){enter(obj)});
 function enter(obj) {
  f1(obj);
  obj.one('mouseleave',function(){leave(obj)})
 }
 function leave(obj) {
  f2(obj);
  obj.one('mouseenter',function(){enter(obj)})
 }}

$(".mouse-trap").mouse_trap(function() {
    // mouse came in
},function() {
    // mouse came out
});

jQuery n , N, N - , -,

0

, , , , .

:

  • , , , , . , ( , ). , , , , , . , .

  • , , mouseover mouseout. , " , ", mouseover mouseout .

  • , , , eicto, , , .

, , , , , ( ) , .

0

O (2):

HTML:

<div class="mouse-trap-container">
  <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>
</div>

JS:

$('div.mouse-trap-container')
   .delegate('div.mouse-trap', 'mouseenter', function(e) {
      // mouse came in
 }).delegate('div.mouse-trap', 'mouseleave', function(e) {
     // mouse left
 });
0

, , , ..
/ - , . , . hover():

$('.mouse-trap').hover(
  function() {
    // mouse in

  },
  function() {
    // mouse out
  }
);
-1

More articles:


All Articles