HTML DOM MouseEvent 객체 완벽 가이드 – 주요 속성과 이벤트 총정리

HTML DOM MouseEvent 객체란?

HTML DOM MouseEvent 객체는 사용자가 마우스로 HTML 문서의 요소와 상호작용할 때 발생하는 이벤트를 나타냅니다. 클릭, 더블클릭, 마우스 이동 등 브라우저에서 일어나는 거의 모든 마우스 동작은 MouseEvent 객체를 통해 감지하고 처리할 수 있습니다.

MouseEvent 객체는 아래와 같은 속성(Property)과 메서드(Method)를 제공합니다.

속성 / 메서드	설명
altKey	마우스 이벤트가 발생한 시점에 키보드의 "ALT" 키가 눌려 있었는지 여부를 반환합니다.
button	마우스 이벤트가 발생한 시점에 눌린 마우스 버튼에 해당하는 숫자를 반환합니다.
buttons	마우스 이벤트가 발생한 시점에 눌려 있던 마우스 버튼들의 정보를 반환합니다.
clientX	마우스 이벤트가 발생한 시점에 현재 브라우저 창을 기준으로 한 마우스 포인터의 수평(x) 좌표를 반환합니다.
clientY	마우스 이벤트가 발생한 시점에 현재 브라우저 창을 기준으로 한 마우스 포인터의 수직(y) 좌표를 반환합니다.
ctrlKey	마우스 이벤트가 발생한 시점에 키보드의 "CTRL" 키가 눌려 있었는지 여부를 반환합니다.
getModifierState()	지정한 보조키(Modifier Key)가 활성화되어 있으면 true, 그렇지 않으면 false를 반환합니다.
metaKey	이벤트가 발생한 시점에 키보드의 "META" 키가 눌려 있었는지 여부를 반환합니다.
movementX	마지막 mousemove 이벤트 위치를 기준으로 한 마우스 포인터의 수평(x) 좌표를 반환합니다.
movementY	마지막 mousemove 이벤트 위치를 기준으로 한 마우스 포인터의 수직(y) 좌표를 반환합니다.
offsetX	대상(target) 요소의 가장자리를 기준으로 한 마우스 포인터의 수평(x) 좌표를 반환합니다.
offsetY	대상(target) 요소의 가장자리를 기준으로 한 마우스 포인터의 수직(y) 좌표를 반환합니다.
pageX	마우스 이벤트가 발생한 시점에 문서(document) 전체를 기준으로 한 마우스 포인터의 수평(x) 좌표를 반환합니다.
pageY	마우스 이벤트가 발생한 시점에 문서(document) 전체를 기준으로 한 마우스 포인터의 수직(y) 좌표를 반환합니다.
relatedTarget	마우스 이벤트와 연관된 HTML 요소를 반환합니다.
screenX	이벤트가 발생한 시점에 물리적 화면(screen)을 기준으로 한 마우스 포인터의 수평(x) 좌표를 반환합니다.
screenY	이벤트가 발생한 시점에 물리적 화면(screen)을 기준으로 한 마우스 포인터의 수직(y) 좌표를 반환합니다.
shiftKey	이벤트가 발생한 시점에 키보드의 "SHIFT" 키가 눌려 있었는지 여부를 반환합니다.
which	마우스 이벤트가 발생한 시점에 눌린 마우스 버튼이 어떤 것인지 반환합니다.

예제 1: MouseEvent clientX 속성 활용하기

다음은 MouseEvent의 clientX 속성을 활용한 간단한 미니 게임 예제입니다. 마우스 포인터의 x좌표를 실시간으로 추적하여 안전 구역과 위험 구역을 판별합니다.

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   #outer {
      width:70%;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      border:1px solid black;
      height: 105px;
      background-color: #28a745;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   #upper {
      border-bottom: 1px solid black;
      height: 40px;
      margin: 0 0 15px 0;
      background-color: #DC3545;
   }
   #lower {
      border-top: 1px solid black;
      height: 40px;
      margin: 15px 0 0 0;
      background-color: #DC3545;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>MouseEvent-clientX</legend>
         <div id="outer">
         <div id="upper"><h2>Danger</h2></div>
         <div id="lower"><h2>Danger</h2></div>
         </div>
         <input type="button" id="start" value="Start" onclick="gameStart()">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById('divDisplay');
   var gameDisplay = document.getElementById('outer');
   function playGame(event) {
      var x = event.clientX;
      var y = event.clientY;
         if(y > 95 &amp;&amp; y < 110){
            divDisplay.textContent = 'Keep Going!';
               if(x === 439){
                  divDisplay.textContent = 'Congrats! You Did it!';
                  gameDisplay.removeEventListener('mousemove', playGame);
               }
         }
         else{
               divDisplay.textContent = 'You moved to DANGER area. You loose!';
               gameDisplay.removeEventListener('mousemove', playGame);
         }        
   }
   function gameStart(){
      gameDisplay.addEventListener('mousemove',playGame);
   }
</script>
</body>
</html>

실행 결과

'Start' 버튼을 클릭한 후 커서가 초록색(안전) 영역에 있을 때:

HTML DOM MouseEvent 객체 완벽 가이드 – 주요 속성과 이벤트 총정리

'Start' 버튼을 클릭한 후 커서가 초록색(안전) 영역의 끝 지점에 도달했을 때:

HTML DOM MouseEvent 객체 완벽 가이드 – 주요 속성과 이벤트 총정리

'Start' 버튼을 클릭한 후 커서가 빨간색(위험) 영역으로 이동했을 때:

HTML DOM MouseEvent 객체 완벽 가이드 – 주요 속성과 이벤트 총정리

MouseEvent에서 사용할 수 있는 이벤트 종류

MouseEvent 객체에는 다음과 같은 다양한 이벤트 핸들러를 사용할 수 있습니다.

이벤트	설명
onclick	사용자가 요소를 클릭했을 때 발생합니다.
oncontextmenu	사용자가 요소를 마우스 오른쪽 버튼으로 클릭해 컨텍스트 메뉴를 열 때 발생합니다.
ondblclick	사용자가 요소를 더블클릭했을 때 발생합니다.
onmousedown	사용자가 요소 위에서 마우스 버튼을 눌렀을 때 발생합니다.
onmouseenter	마우스 포인터가 요소 위로 진입했을 때 발생합니다.
onmouseleave	마우스 포인터가 요소 밖으로 벗어났을 때 발생합니다.
onmousemove	마우스 포인터가 요소 위에서 움직이는 동안 계속 발생합니다.
onmouseout	마우스 포인터가 요소 또는 그 자식 요소 밖으로 이동했을 때 발생합니다.
onmouseover	마우스 포인터가 요소 또는 그 자식 요소 위로 이동했을 때 발생합니다.
onmouseup	사용자가 요소 위에서 눌렀던 마우스 버튼을 놓았을 때 발생합니다.

예제 2: MouseEvent onmouseout 이벤트 활용하기

다음은 onmouseout 이벤트와 relatedTarget 속성을 함께 활용한 예제입니다. 마우스가 요소를 벗어나 어느 영역으로 이동했는지 실시간으로 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent onmouseout</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   #outer {
      width:70%;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      border:1px solid black;
      height: 105px;
      background-color: #28a745;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   #upper {
      border-bottom: 1px solid black;
      height: 40px;
      margin: 0 0 15px 0;
      background-color: #DC3545;
   }
   #lower {
      border-top: 1px solid black;
      height: 40px;
      margin: 15px 0 0 0;
      background-color: #DC3545;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>MouseEvent-onmouseout</legend>
         <div id="outer" onmouseout="gameStart(event)">
         <div id="upper"><h2>Danger</h2></div>
         <div id="lower"><h2>Danger</h2></div>
         </div>
         <div id="divDisplay"></div>
         </fieldset></form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function gameStart(event) {
      var fetchedID = event.relatedTarget.id
         if(fetchedID !== '')
            divDisplay.textContent = 'You are hovering over '+fetchedID+' <div> element';
         }
</script>
</body>
</html>

실행 결과

커서가 초록색(안전) 영역 위에 있을 때:

HTML DOM MouseEvent 객체 완벽 가이드 – 주요 속성과 이벤트 총정리

커서가 위쪽 빨간색(위험) 영역 위에 있을 때:

HTML DOM MouseEvent 객체 완벽 가이드 – 주요 속성과 이벤트 총정리

커서가 아래쪽 빨간색(위험) 영역 위에 있을 때:

HTML DOM MouseEvent 객체 완벽 가이드 – 주요 속성과 이벤트 총정리

마무리

MouseEvent 객체는 웹 페이지에서 마우스 상호작용을 처리하는 데 필수적인 도구입니다. clientX, clientY 같은 좌표 관련 속성과 onmouseover, onmouseout 같은 이벤트 핸들러를 조합하면 드래그 앤 드롭, 호버 효과, 미니 게임 등 다양한 인터랙티브 기능을 손쉽게 구현할 수 있습니다.