EventTarget
은 이벤트를 받을 수 있으며, 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 DOM 인터페이스입니다.
Element
, document
및 window
가 가장 흔한 이벤트 대상이지만, 다른 객체, 예컨대 XMLHttpRequest
, AudioNode
, AudioContext
등 역시 이벤트 대상이 될 수 있습니다.
많은 이벤트 대상(요소, 문서, 창, ...)은 onevent
속성과 특성을 사용한 이벤트 처리기 등록도 지원합니다.
생성자
EventTarget()
- 새로운
EventTarget
객체 인스턴스를 생성합니다.
메서드
EventTarget.addEventListener()
EventTarget
에 특정 이벤트 유형의 이벤트 처리기를 등록합니다.EventTarget.removeEventListener()
EventTarget
에서 주어진 이벤트 수신기를 제거합니다.EventTarget.dispatchEvent()
EventTarget
에 이벤트를 디스패치 합니다.
Mozilla chrome 코드 용 추가 메서드
on* property를 구현하는 JS로 구현된 이벤트 대상에 쓰이는 Mozilla 확장기능(extension). WebIDL 바인딩도 참조.
- void setEventHandler(DOMString type, EventHandler handler)
- EventHandler getEventHandler(DOMString type)
예제
간단한 EventTarget 구현
var EventTarget = function() {
this.listeners = {};
};
EventTarget.prototype.listeners = null;
EventTarget.prototype.addEventListener = function(type, callback) {
if (!(type in this.listeners)) {
this.listeners[type] = [];
}
this.listeners[type].push(callback);
};
EventTarget.prototype.removeEventListener = function(type, callback) {
if (!(type in this.listeners)) {
return;
}
var stack = this.listeners[type];
for (var i = 0, l = stack.length; i < l; i++) {
if (stack[i] === callback){
stack.splice(i, 1);
return;
}
}
};
EventTarget.prototype.dispatchEvent = function(event) {
if (!(event.type in this.listeners)) {
return true;
}
var stack = this.listeners[event.type].slice();
for (var i = 0, l = stack.length; i < l; i++) {
stack[i].call(this, event);
}
return !event.defaultPrevented;
};
명세
명세 | 상태 | 설명 |
---|---|---|
DOM The definition of 'EventTarget' in that specification. |
Living Standard | 변화 없음. |
Document Object Model (DOM) Level 3 Events Specification The definition of 'EventTarget' in that specification. |
Obsolete | 매개변수 약간이 이제 선택사항(listener ) 또는 null 값을 받아들임(useCapture ). |
Document Object Model (DOM) Level 2 Events Specification The definition of 'EventTarget' in that specification. |
Obsolete | 초기 정의. |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
같이 보기
- Event 참고서 - 웹 플랫폼에서 사용할 수 있는 이벤트 목록
- Event 개발자 안내서
Event
인터페이스