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

114_자바스크립트 마우스 오버 이벤트 사용하기 (이벤트 버블링)

[적용]

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

---

[문법]

이벤트	발생 타이밍
mouseover	포인팅 디바이스가 요소의 위치에 있을 때 (이벤트 버블링)
mouseout	포인팅 디바이스가 요소를 벗어날 때 (이벤트 버블링)

---

[내용]

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

요소 위에 있거나 요소를 벗어날 때 발생하는 이벤트로 mouseenter, mouseleave와 다르게 이벤트 버블링이 일어난다.

버블링이란, 자식 요소에서 발생한 이벤트가 부모 요소까지 전달되는 것을 말한다.

예를 들어 버블링이 일어나는 mouseover의 이벤트 리스너를 부모와 자식 요소 모두에 설정하면,

자식 요소에서 발생한 이벤트가 부모 요소에서도 발생하여 부모 요소의 이벤트 리스너도 함께 실행된다.

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

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

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

 

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

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

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

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

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

 

---

 

 

 

 

 

 

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