Unterschied zwischen mouseover () und mouseenter () in jQuery

In jQuery werden sowohlmouseover() als auchmouseenter() Ereignisse ausgelöst, wenn die Maus das übereinstimmende Element betritt. Der einzige Unterschied besteht in der Art des Handles "event bubbling" im untergeordneten Element. Sehen wir uns zwei Szenarien an:

1. KEIN Kindelement

Wenn die übereinstimmenden Elemente kein untergeordnetes Element haben, funktionieren die Ereignissemouseover() undmouseenter()genau gleich. Probieren Sie es unten aus.

2. MIT Kindelement nach innen

Wenn die übereinstimmenden Elemente ein untergeordnetes Element haben, funktionieren sowohlmouseover() als auchmouseenter() Ereignisse anders als „event bubbling“:

Beispielsweise enthält eine "OuterBox" ein untergeordnetes Element "InnerBox".

OuterBox
    InnerBox

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

mouseover()

Wenn die Maus in die "OuterBox" eintritt, wird das "OuterBox" -Ereignis ausgelöst.
Wenn die Maus in die "InnerBox" eintritt, lösen Sie das "InnerBox" -Ereignis aus, gefolgt vom "OuterBox" -Ereignis.
Wenn die Maus wieder in die "OuterBox" eintritt, wird das "OuterBox" -Ereignis ausgelöst.

mouseenter()

Wenn die Maus in die "OuterBox" eintritt, wird das "OuterBox" -Ereignis ausgelöst.
Wenn die Maus in die "innerBox" eintritt, wird das "innerBox" -Ereignis ausgelöst.
Wenn die Maus wieder in die "OuterBox" eintritt, wird kein Ereignis ausgelöst.

Ja, es ist ziemlich verwirrend und in "Worten" zu verstehen. Lassen Sie es uns anhand des folgenden Beispiels verstehen:

Versuch es selber










  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

Probieren Sie die Demo aus

TOC

Unterschied zwischen mouseover () und mouseenter () in jQuery