HTML DOM UiEvent 객체의 detail 속성은 사용자가 연속으로 클릭한 횟수를 나타내는 숫자를 반환합니다. 예를 들어, 마우스 버튼을 빠르게 여러 번 클릭하면 해당 횟수만큼 값이 증가하는 방식으로 동작합니다.
참고: ondblclick(더블클릭) 이벤트가 발생하면 반환값은 '2'가 되며, onmouseover 또는 onmouseout 이벤트가 발생할 경우에는 항상 '0'을 반환합니다.
구문
detail 속성의 기본 구문은 다음과 같습니다.
연속 클릭 횟수 반환하기
event.detail
이제 Event detail 속성을 활용한 실제 예제를 살펴보겠습니다. 아래 예제는 노란색 원형 요소를 연속으로 클릭하여 현재 점수를 측정하고, 지금까지의 최고 점수를 함께 기록하는 간단한 게임 형태의 코드입니다.
예제
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM UiEvent detail</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#playArea {
display: inline-block;
border-radius: 50%;
background-color: #DC3545;
width: 50px;
height: 50px;
border: 3px solid #AC3509;
}
#clickOn {
border: 3px solid #F0FF33;
margin: 15px auto;
border-radius: 50%;
background-color: #FFF933;
width: 10px;
height: 10px;
}
h2 {
display: inline-block;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-UiEvent-detail</legend>
<h2 id="highScore">High Score: 0</h2>
<h2 id="currScore">Current Score: 0</h2><br>
<div id="playArea"><div onclick="getHighScore(event)" id="clickOn"></div></div><br>
</fieldset>
</form>
<script>
var clickOn = document.getElementById("clickOn");
var playDisplay = document.getElementById("playArea");
var highScore = document.getElementById("highScore");
var currScore = document.getElementById("currScore");
var high = 0, score = 0;
function getHighScore(event) {
var score = event.detail;
currScore.textContent = 'Current Score: '+score;
if(score > high){
highScore.textContent = 'High Score: '+score;
high = score;
}
}
</script>
</body>
</html>
출력 결과
노란색 div 요소를 클릭하기 전의 초기 화면입니다. 최고 점수와 현재 점수가 모두 0으로 표시됩니다.
노란색 div 요소를 연속으로 클릭한 후의 화면입니다. 클릭 횟수에 따라 현재 점수가 업데이트되며, 기존 최고 점수보다 높으면 최고 점수도 함께 갱신됩니다.
노란색 div 요소를 다시 클릭했지만 이전보다 적은 횟수로 클릭한 후의 화면입니다. 이 경우 현재 점수만 새로운 값으로 변경되고, 최고 점수는 기존 기록이 그대로 유지되는 것을 확인할 수 있습니다.
