EventListener

EventListener インターフェースは、EventTarget オブジェクトによってディスパッチされたイベントを処理できるオブジェクトを表します。

レガシーコンテンツとの互換性が必要なため、EventListener は、関数、handleEvent()メソッドをもつオブジェクト両方を受け入れます。
これを以下の  に示します。

プロパティ

このインターフェースはいかなるプロパティを実装も継承もしません。

メソッドの概要

void handleEvent(in Event event);

メソッド

handleEvent()

このメソッドは、EventListener インターフェースが登録されたイベントタイプについて、そのイベントが発生するたびに呼び出されます。

void handleEvent(
  in Event event
);
引数
event
発生した DOM Event イベント。

補記

このインターフェースは [function] フラグが付いているため、すべての JavaScript Function オブジェクトで自動的に実装されています。このような実装で handleEvent() メソッドを呼び出すと、自動的にその機能が実行されます。

HTML

<button id="btn">Click here!</button>

JavaScript

const buttonElement = document.getElementById('btn');

// Add a handler for the 'click' event by providing a callback function.
// Whenever the element is clicked, a pop-up with "Element clicked!" will
// appear.
buttonElement.addEventListener('click', function (event) {
  alert('Element clicked through function!');
});

// For compatibility, a non-function object with a `handleEvent` property is
// treated just the same as a function itself.
buttonElement.addEventListener('click', {
  handleEvent: function (event) {
    alert('Element clicked through handleEvent property!');
  }
});

Result

See Also:

関連情報