목차
detail 예제 - 마우스 클릭 횟수 확인 detail 정의 detail 구문
detail 예제 - 마우스 클릭 횟수 확인
[주의] - 짧은 시간 내 연속적으로 클릭한 경우에만 클릭횟수 올라감 .
<button onclick="homzzang(event)">클릭</button>
<p id="res"></p>
<script>
function homzzang(event) {
let cnt = event.detail;
document.getElementById("res").innerHTML = cnt;
}
</script>
결과보기
detail 정의
해당 이벤트의 상세정보(=상세내용) 반환.
1.
읽기전용 속성임.
이벤트 종류에 따라 담고 있는 정보가 다름.
2.
IE9 이상 주요 최신 브라우저 모두 지원.
3. MDN detail 예제보기https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
detail 구문
event .detail
[반환값]
아주 짧은 시간 동안에 클릭한 클릭횟수과 관련된 숫자 반환. (단, 이벤트 종류에 따라 반환값 다름.)
현재 클릭 횟수 반환.
click 이벤트에서는 1 반환.
dblclick 이벤트에서는 2 반환.
클릭 횟수에 1을 더한 값 반환.
(예) 사용자가 마우스를 한 번 클릭하면 mousedown 이벤트에서 1 이 반환되고, mouseup 이벤트에서는 2 가 반환됨.
3. 그외의 이벤트: 0 반환.
클릭 관련 이벤트 (click / dblclick / mousedown / mouseup) 제외한 그외 모든 이벤트 (예: keyboard 이벤트, focus 이벤트, drag 이벤트 등)에서는 details 속성이 0 반환함.
