[책] 자바스크립트 코드 레시피 278 - 104일차

마우스 조작 이벤트 사용하기

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

구문

mousedown 마우스 버튼을 누르는 시점
mouseup 마우스 버튼을 떼는 시점
mousemove 마우스를 움직이는 시점

설명

마우스의 움직임과 관련된 세세한 조작은 클릭 이벤트만으로는 부족합니다. 마우스 클릭 시 점과 떼는 시점, 그리고 움직이는 시점과 관련된 기능의 이벤트를 확인해봅니다. 마우스 이벤트의 정보를 가져오고 싶은 DOM 요소에 각각의 이벤트를 설정합니다. main 클래스 지정 요소(조작 영역)에서 마우스 움직임에 따라 로그를 출력하는 것을 확인해봅니다.

index.html

<div class="log"></div>

---

style.css

.log {
  width: 500px;
  height: 100px;
  border: 1px solid #000;
}

---

script.js

document.addEventListener('DOMContentLoaded', () => {
  const log = document.querySelector('.log');
  
  // 마우스 버튼 누르기 이벤트 발생
  log.addEventListener('mousedown', () => {
    log.innerText = '마우스 버튼 누르기';
  });
  
  // 마우스 버튼 떼기
  log.addEventListener('mouseup', () => {
    log.innerText = '마우스 버튼 떼기';
  });
  
  /// 마우스 움직이면 값이 출력
  log.addEventListener('mousemove', () => {
    console.log('나와라');
  });
});