[DOM_Event] JS - detail 속성 - 사용자 이벤트 상세정보 반환 (= 이벤트 상세내용 확인 = detail속성 = 디테일속성) ※ 마우스클릭횟수 세기/카운트

목차

1. detail 예제 - 마우스 클릭 횟수 확인
2. detail 정의
3. 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 반환함.