EventTarget

EventTarget は DOM インターフェイスで、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装しています。

ElementDocumentWindow は、最も一般的なイベントターゲットですが、他のオブジェクトも、例えば XMLHttpRequestAudioNodeAudioContext などもイベントターゲットになります。

多くのイベントターゲット (要素、文書、ウィンドウを含む) は、イベントハンドラーを設定するのに onイベント名 プロパティや属性を使用することもできます。

コンストラクター

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;
};

仕様書

仕様書 状態況 備考
DOM
EventTarget の定義
現行の標準 変更なし。
Document Object Model (DOM) Level 3 Events Specification
EventTarget の定義
廃止 いくつかの引数が任意になったり (listener)、 null 値を許可するようになったりした (useCapture)。
Document Object Model (DOM) Level 2 Events Specification
EventTarget の定義
廃止 初回定義。

ブラウザーの互換性

BCD tables only load in the browser

関連情報