[JS] 마우스 이벤트

안녕하세요! 이번 포스팅에서는 웹 개발에서 정말 자주 쓰이는 JavaScript 마우스 이벤트에 대해 알아볼게요. 우리가 웹 페이지에서 마우스를 클릭하거나 움직일 때, 다양한 이벤트가 발생하는데요, 이 이벤트들을 잘 활용하면 훨씬 더 인터랙티브한 웹 페이지를 만들 수 있어요. 그럼 이제 하나씩 쉽게 설명해 드릴게요!

 

 

커버 이미지 - 마우스

 

JavaScript 마우스 이벤트

 

javaScript 마우스 이벤트

 

1. 자주 쓰이는 마우스 이벤트

2. 이벤트 객체

3. 실전 코딩 해보기

4. 마무리

추천글

 

 

자주 쓰이는 마우스 이벤트

1. click
   click 이벤트는 대상을 클릭했을 때 발생하는 이벤트입니다.
   

   document.querySelector('.element').addEventListener('click', function() {
       alert('클릭 이벤트');
   });

   
   
2. dbclick
   dbclick 이벤트는 대상을 더블 클릭했을 때 발생하는 이벤트입니다.
   

   document.querySelector('.element').addEventListener('dblclick', function() {
       alert('더블 클릭 이벤트');
   });

   
   
3. mousedown & mouseup
   mousedown은 마우스를 누를 때, mouseup은 마우스를 뗄 때 발생하는 이벤트입니다.
   

   document.querySelector('.element').addEventListener('mousedown', function() {
       console.log('마우스를 눌렀어요!');
   });
   
   document.querySelector('.element').addEventListener('mouseup', function() {
       console.log('마우스를 뗐어요!');
   });

   
   
4. mousemove
   mousemove 마우스를 움직일 때 발생합니다. 마우스가 움직일 때마다 이벤트가 계속 발생해 실시간으로 추적할 수 있습니다.
   

   document.addEventListener('mousemove', function(event) {
       console.log(`마우스 좌표: X: ${event.clientX}, Y: ${event.clientY}`);
   });

   
   
5. mouseenter & mouseleave
   mouseenter는 마우스가 특정 요소에 들어갈 때, mouseleave는 마우스가 그 요소에서 나올 때 발생하는 이벤트입니다. 이 두 이벤트는 버블링이 일어나지 않습니다. 즉 자식 요소에 영향을 주지 않아서, 부모 요소에 들어오고 나가는 동작만 잡을 수 있습니다.
   

   document.querySelector('.element').addEventListener('mouseenter', function() {
       console.log('요소에 마우스가 들어왔어요!');
   });
   
   document.querySelector('.element').addEventListener('mouseleave', function() {
       console.log('요소에서 마우스가 나갔어요!');
   });

   
   
6. mouseover & mouseout
   mouseover와 mouseout은 mouseenter/mouseleave와 비슷한데, 차이점은 버블링이 일어난다는 것입니다. 자식 요소까지 마우스 이벤트를 감지하고 싶다면 이 이벤트를 사용하면 됩니다.
   

   document.querySelector('.element').addEventListener('mouseover', function() {
       console.log('마우스가 요소 위로 이동했어요!');
   });
   
   document.querySelector('.element').addEventListener('mouseout', function() {
       console.log('마우스가 요소에서 벗어났어요!');
   });

   
   

이벤트 객체

마우스 이벤트가 발생하면 브라우저는 자동으로 이벤트 객체(event object)라는 걸 만들어서 이벤트 핸들러로 전달합니다. 이 객체에는 유용한 정보가 많이 담겨 있습니다. 몇 가지 중요한 속성을 살펴보겠습니다.

 

 

• button: 클릭한 마우스 버튼의 정보를 알려줍니다. (0: 왼쪽 버튼, 1: 휠 버튼, 2: 오른쪽 버튼)
• ctrlKey, shiftKey, altKey: Ctrl, Shift, Alt 키를 함께 눌렀는지 알려줍니다.
• target: 마우스 이벤트가 발생한 요소를 알려줍니다.
• relatedTarget: 마우스 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소를 알려줍니다.
• clientX, clientY: 마우스가 화면의 어디에 있는지 좌표를 알려줍니다. (스크롤 위치와 무관하게 이벤트가 발생하는 순간 화면의 좌측 상단 모서리를 [0, 0]으로 계산합니다.)
• offsetX, offsetY: 마우스가 화면의 어디에 있는지 좌표를 알려줍니다. (스크롤 위치와 무관하게 이벤트가 발생한 대상의 좌측 상단 모서리를 [0, 0]으로 계산합니다.)
• pageX, pageY:  마우스가 화면의 어디에 있는지 좌표를 알려줍니다. (스크롤로 인해 보이지 않게 된 화면의 영역까지 포함해 전체 문서 내에서 마우스의 좌표를 계산합니다.)

offset, client, page의 차이

 

 

 

실전 코딩해 보기

mousemove 이벤트를 이용해 실시간으로 box 기준으로 마우스 커서의 좌표를 감지하고 좌표 값을 이용해 box의 배경색을 바꾸는 예제를 만들어 봤습니다. 

 

See the Pen Untitled by 강수민 (@rtrnknpb-the-solid) on CodePen.

 

 

 

 

정리

 

JavaScript의 마우스 이벤트는 정말 다양하게 활용할 수 있어요. 클릭, 이동, 진입, 이탈 등 사용자가 마우스를 어떻게 움직이느냐에 따라 반응하는 다양한 이벤트를 적절히 사용하면, 사용자와 상호작용하는 재미있는 웹 페이지를 만들 수 있답니다. 직접 한 번 코드로 시도해 보세요!

 

 

 

추천글

 

2024.09.10 - [개발 공부 일지/JavaScript] - [JS] 이벤트 버블링과 캡처링

[JS] 이벤트 버블링과 캡처링

2024.09.11 - [개발 공부 일지/JavaScript] - [JS] 키보드 이벤트

[JS] 키보드 이벤트