--- title: EventTarget slug: Web/API/EventTarget tags: - API - DOM - DOM Events - EventTarget - Interface translation_of: Web/API/EventTarget ---

{{ApiRef("DOM Events")}}

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

{{domxref("Element")}}、{{domxref("Document")}}、{{domxref("Window")}} は、最も一般的なイベントターゲットですが、他のオブジェクトも、例えば {{domxref("XMLHttpRequest")}}、{{domxref("AudioNode")}}、{{domxref("AudioContext")}} などもイベントターゲットになります。

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

{{InheritanceDiagram}}

コンストラクター

{{domxref("EventTarget.EventTarget()","EventTarget()")}}
新しい EventTarget オブジェクトのインスタンスを作成します。

メソッド

{{domxref("EventTarget.addEventListener()", "EventTarget.addEventListener()")}}
特定のイベント種別のイベントハンドラーを EventTarget に登録します。
{{domxref("EventTarget.removeEventListener()", "EventTarget.removeEventListener()")}}
EventTarget からイベントリスナーを削除します。
{{domxref("EventTarget.dispatchEvent()", "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;
};

仕様書

仕様書 状態況 備考
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}} {{Spec2('DOM WHATWG')}} 変更なし。
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}} {{Spec2('DOM3 Events')}} いくつかの引数が任意になったり (listener)、 null 値を許可するようになったりした (useCapture)。
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}} {{Spec2('DOM2 Events')}} 初回定義。

ブラウザーの互換性

{{Compat("api.EventTarget")}}

関連情報