{{APIRef("DOM Events")}}
- -EventListener インターフェースは、{{domxref("EventTarget")}} オブジェクトによってディスパッチされたイベントを処理できるオブジェクトを表します。
レガシーコンテンツとの互換性が必要なため、EventListener は、関数、handleEvent()メソッドをもつオブジェクト両方を受け入れます。
- これを以下の 例 に示します。
このインターフェースはいかなるプロパティを実装も継承もしません。
- -void handleEvent(in Event event); |
-
このメソッドは、EventListener インターフェースが登録されたイベントタイプについて、そのイベントが発生するたびに呼び出されます。
void handleEvent( - in Event event -); -- -
eventこのインターフェースは [function] フラグが付いているため、すべての JavaScript Function オブジェクトで自動的に実装されています。このような実装で {{ manch("handleEvent") }} メソッドを呼び出すと、自動的にその機能が実行されます。
<button id="btn">Click here!</button>- -
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!');
- }
-});
-
-
-{{EmbedLiveSample('Example')}}
- -{{APIRef("DOM Events")}}
+ +EventListener インターフェースは、{{domxref("EventTarget")}} オブジェクトによってディスパッチされたイベントを処理できるオブジェクトを表します。
レガシーコンテンツとの互換性が必要なため、EventListener は、関数、handleEvent()メソッドをもつオブジェクト両方を受け入れます。
+ これを以下の 例 に示します。
このインターフェースはいかなるプロパティを実装も継承もしません。
+ +void handleEvent(in Event event); |
+
このメソッドは、EventListener インターフェースが登録されたイベントタイプについて、そのイベントが発生するたびに呼び出されます。
void handleEvent( + in Event event +); ++ +
eventこのインターフェースは [function] フラグが付いているため、すべての JavaScript Function オブジェクトで自動的に実装されています。このような実装で {{ manch("handleEvent") }} メソッドを呼び出すと、自動的にその機能が実行されます。
<button id="btn">Click here!</button>+ +
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!');
+ }
+});
+
+
+{{EmbedLiveSample('Example')}}
+ +