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

112_자바스크립트 마우스 조작 이벤트 사용하기

[적용]

• 마우스 움직임에 따라 이미지에 애니메이션 효과를 주고 싶을 때
• 마우스 움직임에 따라 작업을 처리하고 싶을 때

---

[문법]

이벤트	발생 타이밍
mousedown	마우스 버튼을 누르는 시점
mouseup	마우스 버튼을 떼는 시점
mousemove	마우스를 움직이는 시점

---

[내용]

마우스의 움직임과 관련된 세세한 조작은 클릭 이벤트만으로는 부족하다.

마우스 클릭 시점과 떼는 시점, 그리고 움직이는 시점과 관련된 기능의 이벤트를 확인해 보자.

 

마우스 이벤트의 정보를 가져오고 싶은 DOM 요소에 각각의 이벤트를 설정한다.

main 클래스 지정 요소(조작 영역)에서 마우스 움직임에 따라 로그를 출력하는 샘플을 확인해 보자.

 

HTML                                                                                                                                                              index.html

<main class="main">
	<div id="log2"></div>
</main>

JavaScript                                                                                                                                                          main.js

// 조작 영역
const logArea = document.querySelector('#log2');

// 대상 영역에서 마우스 버튼을 누르면 로그를 출력
logArea.addEventListener('mousedown', () => {
	logArea.innerHTML = `마우스 클릭 이벤트 발생`;
});

// 대상 영역에서 마우스 버튼을 떼면 로그를 출력
logArea.addEventListener('mouseup', () => {
	logArea.innerHTML = `마우스 클릭 이벤트 발생`;
});

// 대상 영역에서 마우스를 움직이면 로그를 출력
logArea.addEventListener('mousemove', () => {
	logArea.innerHTML = `마우스 이동 이벤트 발생`;
});

 

 

---

 

 

 

 

 

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