Différent entre mouseover () et mouseenter () dans jQuery

Dans jQuery, les événementsmouseover() etmouseenter() sont déclenchés lorsque la souris entre dans l'élément correspondant. La seule différence réside dans la manière du handle "event bubbling" dans l'élément enfant, voyons deux scénarios:

1. AUCUN élément enfant

Si les éléments correspondants n'ont pas d'élément enfant, les événementsmouseover() etmouseenter() fonctionnent exactement de la même manière. Voir l'essayer vous-même ci-dessous.

2. AVEC élément enfant à l'intérieur

Si les éléments correspondants ont un élément enfant, les événementsmouseover() etmouseenter() fonctionnent différemment à la manière de «event bubbling»:

Par exemple, un "externalBox" contient un élément enfant "innerBox".

OuterBox
    InnerBox

P.S Assure both outerBox and innerBox are attached to certain events.

mouseover()

Lorsque la souris entre dans la "boîte extérieure", déclenchez l'événement "boîte extérieure".
Lorsque la souris entre dans la "boîte intérieure", déclenchez l'événement "boîte intérieure", suivi de l'événement "boîte extérieure".
Lorsque la souris revient dans la "boîte extérieure", déclenchez l'événement "boîte extérieure".

mouseenter()

Lorsque la souris entre dans la "boîte extérieure", déclenchez l'événement "boîte extérieure".
Lorsque la souris entre dans la "boîte intérieure", déclenchez l'événement "boîte intérieure".
Lorsque la souris revient dans la "boîte extérieure", aucun événement ne se déclenche.

Ya, c'est assez déroutant et comprendre en «mots», laissez-le comprendre en jouant l'exemple ci-dessous:

Essayez-le vous-même










  jQuery mouseover() vs mouseenter() example


  
      mouseover() - no child element
      OuterBox
      
      #mouseover is fired : 0
  

  
      mouseenter() - no child element
      OuterBox
      
      #mouseenter is fired : 0
  





  
      mouseover() - with child elements
      OuterBox
        InnerBox
        
      
      #mouseover outer is fired : 0
          

      #mouseover inner is fired : 0
  

  
      mouseenter() - with child elements
      OuterBox
        InnerBox
        
      
      #mouseenter outer is fired : 0
          

      #mouseenter inner is fired : 0

Essayez la démo

TOC

Différent entre mouseover () et mouseenter () dans jQuery