728x90
이벤트 메서드 mouseenter/mouseover 비교하기
이벤트 메서드인 addEventListener()의 이벤트로 사용되는 mouseenter와 mouseover는 요소 위에 마우스가 위치한 경우의 이벤트를 의미합니다. 두가지 이벤트의 특징을 알아보고 공톰점과 차이점을 비교해보도록 하겠습니다!
> 이벤트 메서드 : addEventListener("mouseenter")
mouseenter는 요소 위에 포인터가 위치해 있을 때의 이벤트를 의미합니다. mouseover와의 차이점은 mouseenter는 메서드가 적용된 요소 자신에게만 이벤트가 발생한다는 점입니다.
> 이벤트 메서드 : addEventListener("mouseover")
요소 위에 포인터가 위치해 있을 때의 이벤트를 의미합니다. mouseenter와의 차이점은 mouseover는 이벤트 메서드가 적용된 요소의 내부에 자식 요소가 있을 경우, 자신뿐만 아니라 그 자식 요소에게도 이벤트가 발생한다는 점입니다.
> 한눈에 비교하기
| 비교 | mouseenter | mouseover |
|---|---|---|
| 자식요소의 이벤트 발생 |
X | O |
| 짝꿍 | mouseleave | mouseout |
| 예시 보기1 |
See the Pen mouseenter 예시1 by hjkang306 (@hjkang306) on CodePen. |
|
| 예시 보기2 | ~준비중~ | |
728x90
'Javascript' 카테고리의 다른 글
| 문자열 메서드 : startsWidth() / endsWidth() (1) | 2022.09.27 |
|---|---|
| MySQL 알아보기 (4) | 2022.09.14 |
| 문자열 결합과 템플릿 문자열 (14) | 2022.09.01 |
| 문자열 메서드 : split() (3) | 2022.09.01 |
| 문자열 메서드 : 대문자 / 소문자 / 공백 (2) | 2022.09.01 |
댓글