목차
- 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
[반환값]
아주 짧은 시간 동안에 클릭한 클릭횟수과 관련된 숫자 반환. (단, 이벤트 종류에 따라 반환값 다름.)
1. (click / dblclick) 이벤트: 현재 클릭 횟수 반환.
- click 이벤트에서는 1 반환.
- dblclick 이벤트에서는 2 반환.
2. (mousedown / mouseup) 이벤트: 클릭 횟수에 1을 더한 값 반환.
- (예) 사용자가 마우스를 한 번 클릭하면 mousedown 이벤트에서 1이 반환되고, mouseup 이벤트에서는 2가 반환됨.
3. 그외의 이벤트: 0 반환.
- 클릭 관련 이벤트 (click / dblclick / mousedown / mouseup) 제외한 그외 모든 이벤트 (예: keyboard 이벤트, focus 이벤트, drag 이벤트 등)에서는 details 속성이 0 반환함.