EventTarget

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

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

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

コンストラクター

EventTarget()
新しい EventTarget オブジェクトのインスタンスを作成します。

メソッド

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

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

関連情報