click
click
이벤트는 포인팅 디바이스 버튼(일반적으로 마우스 기본 버튼)이 하나의 요소(엘리먼트)에서 눌려지고 놓을 때 시작합니다.
Interface | MouseEvent |
---|---|
Sync / Async | Sync |
Bubbles | Yes |
Cancelable | Yes |
Target | Element |
Composed | Yes |
Default Action | Varies |
속성
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
이벤트 타겟 (DOM 트리 내에서의 최상위 타겟). |
type Read only |
DOMString |
이벤트의 타입. |
bubbles Read only |
Boolean |
이벤트가 정상적으로 버블을 발생시키는지 여부 |
cancelable Read only |
Boolean |
이벤트 취소 가능 여부 |
view Read only |
WindowProxy |
Document.defaultView (문서의 window ) |
detail Read only |
long (float ) |
짧은 시간 내에 발생한 연속 클릭 수로, 1씩 증가합니다. |
currentTarget Read only |
EventTarget |
이벤트 리스너가 연결된 노드. |
relatedTarget Read only |
EventTarget |
ouseover , mouseout , mouseenter , mouseleave 이벤트: 이벤트에 대한 보조 타겟 (mouseenter 의 경우는 mouseleave 타겟). 그렇지 않으면 null을 반환합니다. |
screenX Read only |
long |
글로벌(스크린) 좌표에서 마우스 포인터의 X 좌표. |
screenY Read only |
long |
글로벌(스크린) 좌표에서 마우스 포인터의 Y 좌표. |
clientX Read only |
long |
로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 X 좌표. |
clientY Read only |
long |
로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 Y 좌표. |
button Read only |
unsigned short |
마우스 이벤트가 발생했을 때 누른 버튼 번호: 왼쪽 버튼=0, 가운데 버튼=1 (있다면), 오른쪽 버튼=2. 왼손잡이용 마우스의 경우 버튼 동작을 반대로하면, 값은 오른쪽에서 왼쪽으로 읽습니다. |
buttons Read only |
unsigned short |
마우스 이벤트가 발생했을 때 눌려진 버튼: 왼쪽 버튼=1, 오른쪽 버튼=2, 가운데(휠) 버튼=4, 4번째 버튼(일반적으로 브라우저의 뒤로가기 버튼)=8, 5번째 버튼 (일반적으로 앞으로가기 버튼)=16. 두개 이상의 버튼을 누르면, 값의 논리합이 반환됩니다. 예를 들어 왼쪽 버튼과 오른쪽 버튼을 누르면 3이 반환됩니다. (1 | 2). 보다 자세한건 여기를 참조하세요. |
mozPressure Read only |
float |
이벤트를 발생시킬 때 터치 또는 탭 장치에 적용되는 압력의 양; 이 값의 범위는 0.0(최소 압력)과 1.0(최대 압력) 사이 입니다. |
ctrlKey Read only |
Boolean |
이벤트가 발생했을 때 컨트롤 키가 눌러져 있으면 true 그렇지 않으면 false 를 반환합니다. |
shiftKey Read only |
Boolean |
이벤트가 발생했을 때 시프트 키가 눌러져 있으면 true 그렇지 않으면 false 를 반환합니다. |
altKey Read only |
Boolean |
이벤트가 발생했을 때 알트 키가 눌러져 있으면 true 그렇지 않으면 false 를 반환합니다. |
metaKey Read only |
Boolean |
이벤트가 발생했을 때 메타 키가 눌러져 있으면 true 그렇지 않으면 false 를 반환합니다. |
예제
다음 예제는 <button>
의 연속한 클릭 수를 표시합니다.
HTML
<button>Click</button>
JavaScript
const button = document.querySelector('button');
button.addEventListener('click', event => {
button.innerHTML = `클릭 수: ${event.detail}`;
});
결과
빠르고 반복적인 클릭으로 카운터를 늘려보세요. 클릭 중간에 쉬면 숫자가 초기화됩니다.
명세
Specification |
---|
UI Events # event-type-click |
HTML Standard # handler-onclick |
브라우저 호환성
BCD tables only load in the browser