Mouseenter와 Mouseover
자바스크립트의 Mouseenter와 Mouseover의 개념과 차이점에 대해 알아보겠습니다.
01. Mouseover와 Mouseenter
mouseover와 mouseenter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트는 mouseout과 mouseleave가 있습니다. 일반적으로 mouseover는 mouseout과 짝을 이루고, mouseenter는 mouseleave와 짝을 이루어 사용합니다.
mouseover <-> mouseout
mouseenter <-> mouseleave
02. Mouseover와 Mouseenter 차이
두 이벤트 메서드는 유사하지만 이벤트 전파(event propagaton)와 취소 가능성(cancelable)에 큰 차이가 있습니다. mouseover/mouseout은 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파됩니다. 그리고 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있습니다. mouseenter/mouseleave는 이벤트가 발생할 때 버블링이 일어나지 않아 자기 자신만이 이벤트를 받을 수 있게 됩니다. 즉 target과 currentTarget이 항상 일치합니다. 또한 preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 없습니다.
02-1. 예시
코드펜 예시를 보시면 좀 더 쉽게 이해할 수 있습니다.
'Javascript' 카테고리의 다른 글
| [javascript]펼침연산자 - 복사, 추가, 결합 (2) | 2022.09.20 |
|---|---|
| [javascript]비구조화 할당 (4) | 2022.09.20 |
| [javascript]요소 : 크기 및 위치 (4) | 2022.09.01 |
| [javascript]GSAP (4) | 2022.08.29 |
| [javascript]charAt() / charCodeAt() (3) | 2022.08.22 |
댓글