Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 요소 위에서 마우스 버튼을 놓을 때 스크립트 실행하기 – onmouseup 이벤트 완벽 가이드

onmouseup 이벤트란?

사용자가 HTML 요소 위에서 마우스 버튼을 눌렀다가 놓는 순간 onmouseup 이벤트가 발생합니다. 이 이벤트 속성을 활용하면 마우스 버튼이 놓이는 정확한 시점에 원하는 자바스크립트 코드를 실행할 수 있습니다.

onmouseup은 onmousedown(마우스 버튼을 누를 때 발생)과 함께 사용하면, 버튼을 '누르는' 동작과 '놓는' 동작 각각에 서로 다른 스크립트를 지정할 수 있어 훨씬 더 유용합니다.

예제 코드

아래 예제에서는 제목(h3) 요소 위에서 마우스 버튼을 누르면 글자색이 노란색으로 바뀌고, 버튼을 놓으면 파란색으로 변경됩니다. 직접 실행해 보면서 동작을 확인해 보세요.

<!DOCTYPE html>
<html>
   <body>
      <h3 id = "myid" onmousedown = "mouseDown()" onmouseup = "mouseUp()">
         This is demo heading.
      </h3>
      <p>Click above and then release.</p>
      <script>
         function mouseDown() {
            document.getElementById("myid").style.color = "yellow";
         }
         function mouseUp() {
            document.getElementById("myid").style.color = "blue";
         }
      </script>
   </body>
</html>

코드 동작 방식

  • onmousedown: 마우스 버튼을 누르는 순간 mouseDown() 함수가 호출되어 해당 요소의 글자색이 노란색으로 변경됩니다.
  • onmouseup: 마우스 버튼을 놓는 순간 mouseUp() 함수가 호출되어 글자색이 파란색으로 되돌아갑니다.

onclick과 onmouseup의 차이점

onclick 이벤트는 마우스 버튼을 누르고 놓는 전체 과정이 끝난 후에 발생합니다. 반면 onmouseup은 버튼을 놓는 순간 즉시 반응하기 때문에, 드래그 앤 드롭, 캔버스 그리기 도구, 게임 컨트롤처럼 마우스 조작을 세밀하게 구분해야 하는 상황에 특히 적합합니다.