Event

Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.

이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 액션에 의해 발생할 수도 있고, 혹은 비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있습니다. 요소의 HTMLElement.click() 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 EventTarget.dispatchEvent()를 사용하는 등 프로그래밍적으로도 만들어낼 수 있습니다.

이벤트의 종류는 다양하며 일부는 Event 인터페이스의 파생 인터페이스를 사용합니다. Event 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.

많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"하는 코드를 실행할 수 있습니다. 이벤트 처리기는 대개 EventTarget.addEventListener()를 사용해 다양한 요소(<button>, <div>, <span>, 등등)에 "부착"합니다. 그리고 제대로 추가한 경우, 반대로 removeEventListener()로 제거할 수도 있습니다.

참고: 하나의 요소는 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 대해서도, 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청을 추적하는 등 여러 처리기를 따로 등록할 수 있습니다.

중첩된 많은 요소가 서로 자신만의 처리기를 가지고 있는 경우 이벤트 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소의 "공간 상 위치"가 겹쳐서 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 이벤트 확산과 캡처 설정에 따라 달라집니다.

Event 기반 인터페이스

다음은 Event 인터페이스에서 파생된 인터페이스의 목록입니다.

모든 이벤트 인터페이스 이름은 "Event"로 끝납니다.

생성자

Event()
Event 객체를 생성하고 반환합니다.

속성

Event.bubbles Read only
이벤트가 DOM을 타고 위로 확산되는지 나타냅니다.
Event.cancelBubble
Event.stopPropagation()의 이명으로, 과거에 사용하던 명칭입니다. 이벤트 처리기가 종료되기 전에 값을 true로 설정하면 더 이상의 확산을 막습니다.
Event.cancelable Read only
이벤트를 취소할 수 있는지 나타냅니다.
Event.composed Read only
이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 확산할 수 있는지 나타내는 불리언입니다.
Event.currentTarget Read only
이벤트를 위해 현재 등록된 대상의 참조. 이벤트가 현재 전달되기로한 객체입니다. 재 타게팅을 통해 변경될수도 있습니다.
Event.deepPath This API has not been standardized.
이벤트가 확산하며 거쳐간 DOM NodeArray입니다.
Event.defaultPrevented Read only
이벤트의 event.preventDefault()가 호출됐는지를 나타냅니다.
Event.eventPhase Read only
처리 중인 이벤트 흐름의 단계를 나타냅니다.
Event.explicitOriginalTarget This API has not been standardized. Read only
이벤트의 명시적인 원래 대상입니다. (Mozilla 전용)
Event.originalTarget This API has not been standardized. Read only
이벤트 대상 재설정 이전의 원래 대상입니다. (Mozilla 전용)
Event.returnValue
Internet Explorer가 도입했으며 구형 사이트의 동작을 보장하기 위해 DOM 명세에 포함된 호환용 속성입니다. 이상적으로는 Event.preventDefault()Event.defaultPrevented를 사용해야 하지만, 원하면 returnValue를 사용할 수 있습니다.
Event.srcElement This API has not been standardized.
구버전 Internet Explorer에서 사용한 Event.target의 다른 이름입니다. 비표준이지만 일부 다른 브라우저에서도 호환성을 위해 지원하고 있습니다.
Event.target Read only
이벤트가 처음에 발생했던 대상의 참조입니다.
Event.timeStamp Read only
이벤트가 생성된 시간(밀리초)입니다. 명세에 따르면 문서 로딩 후 이벤트 생성 시점까지의 시간으로 나타나 있지만 실제 구현은 브라우저마다 다릅니다. 또한 이 속성의 값을 DOMHighResTimeStamp로 바꾸는 작업이 진행 중입니다.
Event.type Read only
이벤트의 이름입니다. 대소문자를 구분하지 않습니다.
Event.isTrusted Read only
이벤트가 브라우저에 의해 생성, 예컨대 사용자 클릭으로 인해 발생한 것인지, 아니면 Event.initEvent() 등을 사용한 스크립트에서 발생한 것인지 나타냅니다.

메서드

Event.composedPath()
이벤트의 경로, 즉 수신기를 발동할 모든 객체를 반환합니다. 섀도우 루트의 ShadowRoot.modeclosed인 경우 섀도우 트리의 노드는 포함하지 않습니다.
Event.preventDefault()
취소 가능한 경우 이벤트를 취소합니다.
Event.stopImmediatePropagation()
이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처 단계 등 이후에 순회활 요소에 부착된 수신기도 이 이벤트를 받지 않습니다.
Event.stopPropagation()
이벤트의 DOM 내 추가 확산을 방지합니다.

명세

명세 상태 코멘트
DOM
The definition of 'Event' in that specification.
Living Standard

브라우저 호환성

BCD tables only load in the browser

같이 보기