EventTarget

EventTarget은 이벤트를 받고 그 이벤트 수신기(listener)를 가질 수 있는 객체에 의해 구현된 인터페이스입니다.

Element, document 및 window는 가장 흔한 이벤트 대상(target)이지만, 예를 들어 XMLHttpRequest, AudioNode, AudioContext 및 나머지 다른 객체들도 이벤트 대상이 될 수 있습니다.

많은 이벤트 대상(element, document 및 window 포함)도 on... property 및 attribute를 통해 이벤트 처리기 설정을 지원합니다.

메서드

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 this.removeEventListener(type, callback);
      }
     }
};

EventTarget.prototype.dispatchEvent = function(event){
  if(!(event.type in this.listeners)) {
    return;
  }
    var stack = this.listeners[event.type];
    event.target = this;
    for(var i = 0, l = stack.length; i < l; i++) {
        stack[i].call(this, event);
    }
};

명세

브라우저 호환성

같이 보기

• Event reference - 플랫폼에서 이용 가능한 이벤트.
• Event 개발자 안내서
• Event 인터페이스