EventTarget

EventTarget은 이벤트를 받을 수 있으며, 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 DOM 인터페이스입니다.

Element, document 및 window가 가장 흔한 이벤트 대상이지만, 다른 객체, 예컨대 XMLHttpRequest, AudioNode, AudioContext 등 역시 이벤트 대상이 될 수 있습니다.

많은 이벤트 대상(요소, 문서, 창, ...)은 onevent 속성과 특성을 사용한 이벤트 처리기 등록도 지원합니다.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ko/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

생성자

EventTarget()

새로운 EventTarget 객체 인스턴스를 생성합니다.

메서드

EventTarget.addEventListener()

EventTarget에 특정 이벤트 유형의 이벤트 처리기를 등록합니다.

EventTarget.removeEventListener()

EventTarget에서 주어진 이벤트 수신기를 제거합니다.

EventTarget.dispatchEvent()

EventTarget에 이벤트를 디스패치 합니다.

예제

간단한 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;
};

명세

브라우저 호환성

같이 보기

• Event 참고서 - 웹 플랫폼에서 사용할 수 있는 이벤트 목록
• Event 개발자 안내서
• Event 인터페이스