onmousedown 속성으로 마우스 클릭 이벤트 처리하기
HTML에서 onmousedown 속성을 사용하면 요소 위에서 마우스 버튼을 눌렀을 때 원하는 스크립트를 실행할 수 있습니다. 이 속성은 버튼, 제목, 이미지 등 거의 모든 HTML 요소에 적용할 수 있으며, 사용자가 마우스를 누르는 순간 지정된 JavaScript 함수가 호출됩니다.
참고로 onmousedown은 마우스 버튼을 '누르는 순간'에 동작하고, 반대로 버튼을 '떼는 순간'에 동작하게 하려면 onmouseup 속성을 함께 사용하면 됩니다.
예제 코드
아래 예제는 onmousedown과 onmouseup 속성을 함께 활용한 코드입니다. 제목(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>코드 설명
위 코드의 동작 방식을 살펴보면 다음과 같습니다.
1. mouseDown() 함수: 마우스 버튼을 누르는 순간 실행되며, getElementById("myid")로 해당 요소를 찾아 글자색을 노란색(yellow)으로 변경합니다.
2. mouseUp() 함수: 마우스 버튼을 떼는 순간 실행되며, 같은 요소의 글자색을 파란색(blue)으로 되돌립니다.
이처럼 onmousedown 속성을 활용하면 별도의 이벤트 리스너 등록 없이 HTML 태그 안에서 간단하게 마우스 클릭 이벤트를 처리할 수 있습니다. 다만 유지보수와 코드 분리 측면에서는 addEventListener() 메서드를 사용하는 것이 더 권장되는 방식입니다.