EventTarget

EventTarget は、イベントを受け取り、そのためのリスナーを持つ可能性があるオブジェクトにより実装されたインターフェースです。

Element および document、window は、最も一般的なイベントターゲットですが、他のオブジェクトもイベントターゲットになります。例えば、XMLHttpRequest、AudioNode、AudioContext 他。

多くのイベントターゲット (要素、document、window を含む) も、on... プロパティや属性を経由した イベントハンドラ の設定をサポートしています。

メソッド

EventTarget.addEventListener()

EventTarget 上に特定のイベント種別のイベントハンドラを登録します。

EventTarget.removeEventListener()

EventTarget からイベントリスナーを削除します。

EventTarget.dispatchEvent()

この EventTarget にイベントを送出します。

Mozilla chrome コード向けの追加メソッド

on* プロパティを実装するために JavaScript で実装されたイベントターゲットを使用するための Mozilla 拡張があります。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);
  }
};

仕様

ブラウザの実装状況

[1] window.EventTarget does not exist.

関連情報

• イベントリファレンス - プラットフォームで利用可能なイベント。
• イベント開発者ガイド
• Event インターフェース