JS. mouse 효과 차이점

개요

자바스크립트 안에 똑같은 역할을 하는 메서드/ 속성은 없다

 

비슷해 보이지만 미세한 차이가 있거나, 어느 하나가 꼭 필요한 상황이 생기기 마련이다.

 

 

mouse Effect 중 mouse over과 enter 그리고 mouse out과 leave가 딱 그렇다

본문

보통 mouseover, mouseout을 같이 쓰고, mouseenter, mouseleave을 같이 쓴다.

 

1. 움직임 감지 능력

둘은 마우스의 움직임을 감지한다는 공통점이 있다.

 

mouseover, mouseout은 들어와서 어떻게 움직이고 있는지 까지 감지를 하지만 (버블링 o)

mouseenter, mouseleave은 들어왔다, 나갔다만 감지한다! (버블링 x)

 

2. child 요소까지 감지하는가

mouseover, mouseout은 child 요소에서의 움직임까지 감지하지만

mouseenter, mouseleave은 child요소에서는 움직임을 감지하지 않는다

 

3. skip이 가능한가

mouseover, mouseout와 mouseenter, mouseleave 모두

마우스를 빠르게 움직인다면 skip이 된다

컴퓨터보다 사람손이 빠르다는 소리인가...?

 

여튼 그렇다고 한다.

 

 

출처 https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave

with 네이버 파파고