마우스 이벤트 [mouseover - mouseout] vs [mouseenter - mouseleave]

마우스와 관련된 이벤트 연결 메소드 4가지

mouseover / mouseout

mouseenter / mouseleave

 

각자 두가지 이벤트엔 차이가 있다

 

mouseover - mouseout : 자식 요소 접근 시에도 이벤트 핸들링 함

mouseenter - mouseleave : 자식 요소 접근 시에도 이벤트 핸들링 하지 않음

상황에 따라 메소드를 선택하여 사용해야한다

 

 

예시로 어떤 식으로 이벤트 핸들링이 되는지 살펴보자

 

1) 부모와 자식의 이벤트 핸들러 관계를 보기 위해 div박스 형성 후 스타일 적용

    - 부모 : orange 

    - 자식 : red

2) 마우스 over-out시 또는 enter-leave시 눈으로 결과 확인 가능하도록 텍스트 출력

첫번째 박스 -> over - out 

두번째 박스 -> enter - leave 

 

over - out박스는

마우스가 부모박스와 자식박스 사이를 왔다갔다 할때도 over과 out이 동시에 이루어짐을 알 수 있음

==> 자식 요소 접근시에도 이벤트 핸들링 됨

 

enter - leave박스는

마우스가 부모박스를 들어가든 자식박스를 들어가든 enter와 leave가 한번씩만 일어남

부모박스에서 자식박스 사이를 이동할때 enter와 leave는 일어나지 않음

==> 자식 요소 접근시에도 이벤트 핸들링 되지 않음