[jQuery] mouseenter, mouseover / mouseout, mouseleave / hover의 차이

# mouseenter vs mouseover

[공통점]

해당 영역에 마우스가 올라가는 것을 감지

[mouseenter]

자식 영역에 들어가면 감지하지 않는다.

[mouseover]

해당 영역의 자식영역까지 들어가도 감지된다.

 

 

mouseenter 이벤트를 사용해 선택 영역에서만 사운드가 들린다.

 

mouseover 이벤트를 사용함으로써 자식까지 선택 영역에 포함돼 사운드가 겹쳐지고 있다.

---

# mouseout vs mouseleave

[공통점]

해당 영역에 마우스가 올라가 있는 상태에서 벗어난 것을 감지

[mouseleave]

자식 영역에 들어가 요소를 빠져나가도 감지하지 않는다.

[mouseout]

요소 안에 다른 요소를 빠져나가도 감지하게 된다.

---

# hover

hover는 mouseover와 mouseout 기능 두가지를 모두 가지고 있다.

// 사용의 차이 비교
$gnb.hover(gnb_eve__in, gnb_eve__out);

$gnb.on({
  mouseover: gnb_eve__in, 
  mouseout: gnb_eve__out
});

---

[공부좌표]

[jQuery] hover (mouseenter, mouseover, mouseout, mouseleave) 차이