Отличается между mouseover () и mouseenter () в jQuery

Различаются между mouseover () и mouseenter () в jQuery

В jQuery событияmouseover() иmouseenter() срабатывают, когда мышь входит в совпадающий элемент. Единственное отличие - это способ дескриптора «event bubbling» в дочернем элементе, давайте рассмотрим два сценария:

1. НЕТ дочернего элемента

Если у совпадающих элементов нет дочернего элемента, событияmouseover() иmouseenter() работают точно так же. Смотрите сами попробуйте ниже.

2. С дочерним элементом внутри

Если у совпадающих элементов есть дочерний элемент, событияmouseover() иmouseenter() работают по-разному, как «event bubbling»:

Например, «externalBox» содержит дочерний элемент «innerBox».

OuterBox
    InnerBox

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

mouseover()

Когда мышь входит в «externalBox», запускает событие «externalBox».
Когда мышь входит в «innerBox», запускает событие «innerBox», а затем событие «externalBox».
Когда мышь возвращается в «externalBox», запускается событие «externalBox».

mouseenter()

Когда мышь входит в «externalBox», запускает событие «externalBox».
Когда мышь входит в «innerBox», запускает событие «innerBox».
Когда мышь возвращается в «externalBox», никакое событие не сработает.

Да, это довольно запутанно и понять словами, давайте поймем это, играя на следующем примере:

Попробуй сам










  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

Попробуйте демо

TOC