onmouseup 이벤트는 마우스 버튼을 눌렀다가 놓는(릴리스하는) 순간 발생하는 이벤트입니다. 사용자가 웹 페이지의 특정 요소 위에서 마우스 버튼에서 손을 떼는 동작을 하면, 이 이벤트에 연결된 함수나 코드가 실행됩니다.
onmouseup 이벤트의 주요 특징
onmouseup 이벤트를 효과적으로 활용하려면 다음과 같은 특징을 이해하는 것이 좋습니다.
- 마우스 버튼을 누를 때 발생하는 onmousedown 이벤트와 짝을 이루며, 버튼을 놓을 때 실행됩니다.
- HTML 요소의 속성으로 직접 지정하거나, JavaScript의
addEventListener('mouseup', 함수)방식으로도 등록할 수 있습니다. - 드래그 앤 드롭 구현, 그림 그리기 도구, 선택 영역 확정 등 마우스 조작이 끝나는 시점에 동작이 필요한 기능에 자주 사용됩니다.
- 마우스 버튼 종류(왼쪽/오른쪽/가운데)에 따라 다른 처리를 하고 싶다면 이벤트 객체의
button속성을 함께 확인하면 됩니다.
기본 사용 예제
아래 예제 코드를 실행해 보면, 문단 위에서 마우스 버튼을 놓는 순간 경고창(alert)이 나타나는 것을 확인할 수 있습니다.
<html>
<head>
<script>
<!--
function sayHello() {
alert("Mouse Up")
}
//-->
</script>
</head>
<body>
<p onmouseup = "sayHello()">This is demo text for mouseup event.</p>
</body>
</html>
코드 설명
위 코드의 동작 방식은 다음과 같습니다.
<p>요소에onmouseup = "sayHello()"속성을 추가하여, 해당 문단 위에서 마우스 버튼이 놓일 때sayHello()함수가 호출되도록 설정했습니다.sayHello()함수는alert("Mouse Up")을 실행하여 "Mouse Up"이라는 메시지가 담긴 경고창을 화면에 표시합니다.- 사용자가 문단 영역 안에서 마우스 버튼을 클릭한 후 손을 떼면 이벤트가 트리거되어 결과를 즉시 확인할 수 있습니다.
addEventListener 방식으로 작성하기
HTML 속성 대신 JavaScript 코드 내에서 이벤트를 등록하는 것이 더 권장되는 방식입니다. 아래와 같이 작성할 수 있습니다.
<p id="demo">마우스 버튼을 여기서 놓아보세요.</p>
<script>
document.getElementById("demo").addEventListener("mouseup", function() {
alert("Mouse Up");
});
</script>
이 방식은 HTML과 JavaScript 코드를 분리할 수 있어 유지보수성이 뛰어나며, 하나의 요소에 여러 이벤트 리스너를 등록할 수 있다는 장점도 있습니다.