HTML의 onmouseup 이벤트 속성은 HTML 문서 내 요소 위에서 마우스 버튼을 눌렀다가 놓는(릴리스) 순간에 실행되는 이벤트 속성입니다. 마우스 클릭 동작 중 '누르는' 시점에는 onmousedown이, '놓는' 시점에는 onmouseup이 트리거되므로, 두 속성을 함께 활용하면 버튼 애니메이션, 드래그 인터랙션 등 다양한 사용자 경험을 구현할 수 있습니다.
onmouseup 문법
onmouseup 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onmouseup="script"></tagname>
속성 값으로는 마우스 버튼이 놓였을 때 실행할 JavaScript 코드를 지정합니다.
onmouseup 예제
아래 예제에서는 빨간 원을 마우스로 클릭하면 원이 작아지고(onmousedown), 버튼을 놓으면 원이 커지면서(onmouseup) 크기가 변하는 효과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.circle {
background: #db133a;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px auto;
}
p {
margin: 30px auto;
}
</style>
</head>
<body>
<h1>HTML onmouseup Event Attribute Demo</h1>
<div class="circle" onmousedown="mouseDownFn()" onmouseup="mouseUpFn()"></div>
<p>위의 빨간 원을 클릭해 보세요</p>
<script>
function mouseDownFn() {
document.querySelector('.circle').style.transform = 'scale(0.5)';
}
function mouseUpFn() {
document.querySelector('.circle').style.transform = 'scale(1.2)';
}
</script>
</body>
</html>
실행 결과
화면의 빨간 원을 클릭하면 onmousedown 이벤트가 발생하여 원이 축소됩니다.
이후 마우스 버튼을 놓으면 onmouseup 이벤트가 발생하여 원이 확대되는 것을 확인할 수 있습니다.
정리
onmouseup 이벤트 속성은 마우스 버튼이 놓이는 순간 특정 스크립트를 실행하고 싶을 때 사용합니다. onmousedown과 함께 사용하면 클릭의 시작과 끝을 모두 제어할 수 있어, 인터랙티브한 웹 UI를 만드는 데 매우 유용합니다.