[JavaScript] 자바스크립트 마우스 오버 이벤트 사용하기

113_자바스크립트 마우스 오버 이벤트 사용하기

[적용]

• 마우스 오버 작업을 처리하고 싶을 때

---

[문법]

이벤트	발생 타이밍
mouseenter	포인팅 디바이스가 요소의 위치에 있을 때
mouseleave	포인팅 디바이스가 요소를 벗어날 때

---

[내용]

mouseenter와 mouseleave 이벤트는 포인팅 디바이스(마우스, 터치 패드 등)가

요소 위에 있거나 요소를 벗어날 때 발생하는 이벤트다.

 

HTML                                                                                                                                                              index.html

<div class="box">
</div>

JavaScript                                                                                                                                                          main.js

document.querySelector('.box').addEventListener('mouseenter', () => {
	console.log('포인팅 디바이스가 .box 요소 위에 있음');
});

document.querySelector('.box').addEventListener('mouseleave', () => {
	console.log('포인팅 디바이스가 .box 요소를 벗어남');
});

 

 

.box 요소와 inner 요소에 마우스를 올리면 로그가 출력되는 샘플을 확인해 보자

 

HTML                                                                                                                                                              index.html

<div class="box">
	<div class="inner"></div>
</div>

JavaScript                                                                                                                                                          main.js

document.querySelector('.box').addEventListener('mouseenter', () => {
	console.log('.box 요소 위치에 마우스가 있음');
});

document.querySelector('.inner').addEventListener('mouseenter', () => {
	console.log('.inner 요소 위치에 마우스가 있음');
});

function log(message) {
	console.log(message);
}

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김