HTML의 ondblclick 속성은 HTML 문서에서 특정 요소를 마우스로 더블클릭(연속 두 번 클릭)했을 때 지정된 자바스크립트 코드를 실행하는 이벤트 속성입니다. 단순 클릭(onclick)과 달리 두 번 연속으로 클릭해야 이벤트가 발생하며, 버튼에 추가 동작을 부여하거나 사용자와 상호작용하는 웹 페이지를 만들 때 유용하게 활용됩니다.
기본 문법
ondblclick 속성의 기본적인 작성 형식은 다음과 같습니다.
<tagname ondblclick="script"></tagname>
태그 이름에 해당하는 요소에 ondblclick 속성을 추가하고, 속성값으로 실행하고자 하는 자바스크립트 함수나 코드를 지정하면 됩니다.
ondblclick 이벤트 속성 예제
다음은 빨간색 버튼을 더블클릭하면 화면에 메시지가 표시되는 간단한 예제입니다.
<!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;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>HTML ondblclick Event Attribute Demo</h1>
<button class="btn" ondblclick="display()">Double click me</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = 'Hey! you double clicked me';
}
</script>
</body>
</html>
코드 설명
버튼 요소에 ondblclick="display()" 속성이 적용되어 있어, 버튼을 더블클릭하면 display() 함수가 호출됩니다. 이 함수는 querySelector로 .show 클래스를 가진 div 요소를 찾아 그 안에 메시지를 삽입합니다.
실행 결과
위 코드를 브라우저에서 실행하면 그라데이션 배경 위에 다음과 같은 빨간색 버튼이 나타납니다.
이 상태에서 빨간색 버튼을 더블클릭하면 마우스 더블클릭 이벤트가 발생하여, 아래와 같이 "Hey! you double clicked me"라는 메시지가 화면에 출력됩니다.
이처럼 ondblclick 속성을 활용하면 별도의 외부 스크립트 파일 없이도 HTML 요소에 직접 더블클릭 이벤트를 손쉽게 연결할 수 있습니다.