HTML에서 요소를 두 번 클릭(더블클릭)했을 때 특정 스크립트를 실행하려면 ondblclick 속성을 사용하면 됩니다. 버튼, 이미지, 텍스트 등 어떤 요소에든 적용할 수 있으며, 사용자가 해당 요소를 빠르게 연속으로 두 번 클릭하면 지정된 JavaScript 함수가 자동으로 호출됩니다.
ondblclick 속성이란?
ondblclick은 HTML에서 제공하는 이벤트 핸들러 속성으로, 일반적인 단일 클릭(onclick)과는 다른 동작입니다. 예를 들어 한 번 클릭에는 선택 기능을, 두 번 클릭에는 상세 보기나 편집 기능을 연결하는 식으로 활용할 수 있습니다.
예제
아래 코드를 실행하면 버튼을 두 번 클릭했을 때 알림 창이 나타나는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<button ondblclick = "display()">Click me twice</button>
<script>
function display() {
alert("You double-clicked the button!");
}
</script>
</body>
</html>코드 설명
- <button ondblclick="display()"> : 버튼 요소에 ondblclick 속성을 추가하고, 더블클릭 시 실행될 함수 이름을 지정합니다.
- display() 함수 : 더블클릭 이벤트가 발생하면 alert() 메서드를 통해 "버튼을 두 번 클릭했습니다!"라는 알림 창을 화면에 띄웁니다.
이처럼 ondblclick 속성을 활용하면 별도의 이벤트 리스너 등록 없이 간단하게 더블클릭 이벤트를 처리할 수 있습니다. 다만 유지보수와 가독성 측면에서는 JavaScript의 addEventListener('dblclick', ...) 방식을 함께 고려해 보는 것도 좋습니다.