HTML의 onmousedown 이벤트 속성은 HTML 문서 내 특정 요소 위에서 마우스 버튼을 누르는 순간에 지정된 스크립트를 실행하는 이벤트 핸들러입니다. 클릭이 '완료'되는 시점에 발생하는 onclick과 달리, onmousedown은 버튼을 누르는 즉시 반응하기 때문에 드래그 시작, 버튼 눌림 효과 등 즉각적인 피드백이 필요한 인터랙션에 유용하게 활용됩니다.
문법(Syntax)
onmousedown 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onmousedown="script"></tagname>
예제(Example)
아래 예제는 빨간 원형 요소에 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 onmousedown 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>
실행 결과(Output)
화면 중앙의 빨간 원을 클릭하면 onmousedown 이벤트 속성이 어떻게 동작하는지 직접 확인할 수 있습니다.
마우스 버튼을 누르는 순간 mouseDownFn() 함수가 호출되어 원이 scale(0.5)로 축소되고, 버튼을 떼는 순간 onmouseup 이벤트에 의해 mouseUpFn() 함수가 실행되어 원이 scale(1.2)로 확대됩니다. 이처럼 onmousedown은 사용자 입력에 대한 즉각적인 시각적 반응을 만들 때 매우 효과적으로 활용할 수 있습니다.
