EventTarget インターフェース

イベントの本質は、プログラムのさまざまなコンポーネント間の通信方法であり、非同期プログラミングの実装でもあります。 DOM は多数のイベントをサポートしており、この章では DOM イベントプログラミングの紹介を始めます。

特定のイベントを紹介する前に、まず DOM ノードにイベントをリッスンさせる方法を見てみましょう。

概要

DOM ノードのイベント操作 (リスニングとトリガー) はすべて EventTarget インターフェースで定義されます。すべてのノードオブジェクトはこのインターフェイスをデプロイし、イベント通信を必要とする他のいくつかの組み込みブラウザオブジェクト (たとえば、XMLHttpRequest、AudioNode、AudioContext) もこのインターフェイスをデプロイします。

このインターフェースは主に 3 つのインスタンスメソッドを提供します。

addEventListener(): イベントをバインドするためのリスナー関数
removeEventListener(): イベントリスニング関数を削除します。
dispatchEvent(): イベントをトリガーします

EventTarget.addEventListener()

EventTarget.addEventListener() は、現在のノードまたはオブジェクト (つまり、EventTarget インターフェースがデプロイされているオブジェクト) 上の特定のイベントのリスニング関数を定義するために使用されます。このイベントが発生すると、リスニング機能が実行されます。このメソッドには戻り値がありません。

target.addEventListener(type, リスナー[, useCapture]);

このメソッドは 3 つのパラメータを受け取ります。

type: イベント名、大文字と小文字が区別されます。
listener: リスニング機能。イベントが発生すると、listen 関数が呼び出されます。
useCapture: ブール値。true に設定すると、キャプチャフェーズ (キャプチャ) 中にリスニング関数がトリガーされることを意味します (下記の「イベントの伝播」セクションを参照)。このパラメータはオプションであり、デフォルト値は「false」です（リスニング機能はバブリングフェーズ中にのみトリガーされます）。

以下に例を示します。

関数 hello() {
  console.log('Hello world');
}

var button = document.getElementById('btn');
button.addEventListener('click'、こんにちは、false);

上記のコードでは、「button」ノードの「addEventListener()」メソッドが「click」イベントのリスニング関数「hello()」をバインドします。この関数はバブリング段階でのみトリガーされます。

パラメータに関して、注意すべき点が 2 つあります。

まず、listen 関数に加えて、2 番目のパラメータを handleEvent メソッドを持つオブジェクトにすることもできます。これは listen 関数と同じ効果があります。

buttonElement.addEventListener('クリック', {
  handleEvent: 関数 (イベント) {
    console.log('クリック');
  }
});

上記のコードでは、addEventListener() メソッドの 2 番目のパラメータは、handleEvent() メソッドを持つオブジェクトです。

次に、ブール値 useCapture に加えて、3 番目のパラメーターをリスナー構成オブジェクトにして、イベントリスニングの動作をカスタマイズすることもできます。このオブジェクトには次のプロパティがあります。

capture: ブール値。true に設定すると、リスニング機能がキャプチャフェーズでトリガーされることを意味します。デフォルトは、バブリングフェーズでトリガーされることを意味します。

once: ブール値。true に設定すると、リスニング関数が 1 回実行された後に自動的に削除され、今後イベントが監視されなくなることを意味します。このプロパティのデフォルト値は「false」です。

passive: ブール値。true に設定すると、リスニング関数が preventDefault() メソッドを呼び出すことが禁止されることを意味します。呼び出された場合、ブラウザはこのリクエストを無視し、コンソールに警告を出力します。このプロパティのデフォルト値は「false」です。

signal: この属性の値は AbortSignal オブジェクトで、リスナーがシグナルを送信し、必要に応じてリスニング機能を削除するためのシグナルチャネルを設定します。

以下は、listen 関数を 1 回だけ実行できるようにする once 属性の例です。

element.addEventListener('click', 関数 (イベント) {
  // 一度だけ実行されるコード
}, {1 回: true});

addEventListener() メソッドは、現在のオブジェクトの同じイベントに対して複数の異なるリスニング関数を追加できます。これらの関数は追加された順序でトリガーされます。つまり、最初に追加された関数が最初にトリガーされます。同じイベントに対して同じリスナー関数が複数回追加された場合、その関数は 1 回だけ実行され、冗長な追加は自動的に削除されます (手動で削除するために removeEventListener() メソッドを使用する必要はありません)。

関数 hello() {
  console.log('Hello world');
}

document.addEventListener('click'、こんにちは、false);
document.addEventListener('click'、こんにちは、false);

上記のコードを実行してドキュメントをクリックすると、「Hello world」の 1 行だけが出力されます。

リスニング関数にパラメーターを渡したい場合は、リスニング関数を匿名関数でラップできます。

関数 print(x) {
  コンソール.ログ(x);
}

var el = document.getElementById('div1');
el.addEventListener('click', function () { print('Hello'); }, false);

上記のコードは、匿名関数を通じてリスニング関数 print にパラメーターを渡します。

listen 関数内の this は、現在のイベントが存在するオブジェクトを指します。

// HTMLコードは以下の通り
// <p id="para">こんにちは</p>
var para = document.getElementById('para');
para.addEventListener('click', function (e) {
  console.log(this.nodeName); // "P"
}、 間違い）;

上記のコードでは、listen 関数内の this は、イベントが存在するオブジェクト para を指します。

EventTarget.removeEventListener()

EventTarget.removeEventListener() メソッドは、addEventListener() メソッドによって追加されたイベントリスニング関数を削除するために使用されます。このメソッドには戻り値がありません。

div.addEventListener('click', リスナー, false);
div.removeEventListener('click', リスナー, false);

removeEventListener() メソッドのパラメータは、addEventListener() メソッドとまったく同じです。最初のパラメータ「イベントタイプ」では、大文字と小文字が区別されます。

removeEventListener() メソッドによって削除されたリスニング関数は、addEventListener() メソッドによって追加されたリスニング関数である必要があり、同じ要素ノード上に存在する必要があります。そうでない場合は無効になります。

div.addEventListener('click', function (e) {}, false);
div.removeEventListener('click', function (e) {}, false);

上記のコードでは、リスニング関数が同じ匿名関数ではないため、removeEventListener() メソッドは無効です。

element.addEventListener('mousedown', handleMouseDown, true);
element.removeEventListener("mousedown", handleMouseDown, false);

上記のコードでは、3 番目のパラメータが異なるため、removeEventListener() メソッドも無効になります。

EventTarget.dispatchEvent()

EventTarget.dispatchEvent() メソッドは、現在のノード上で指定されたイベントをトリガーし、それによってリスニング関数の実行をトリガーします。このメソッドは、リスニング関数が Event.preventDefault() を呼び出している限り、戻り値は false を返し、それ以外の場合は true を返します。

target.dispatchEvent(イベント)

dispatchEvent() メソッドのパラメータは、Event オブジェクトのインスタンスです (詳細については、「イベントオブジェクト」の章を参照してください)。

para.addEventListener('クリック'、こんにちは、false);
var イベント = 新しいイベント('クリック');
para.dispatchEvent(イベント);

上記のコードは、現在のノードで「click」イベントをトリガーします。

dispatchEvent() メソッドのパラメータが空であるか、有効なイベントオブジェクトではない場合、エラーが報告されます。

次のコードは、dispatchEvent() メソッドの戻り値に基づいてイベントがキャンセルされたかどうかを判断します。

var cancel = !cb.dispatchEvent(event);
if (キャンセル) {
  console.log('イベントがキャンセルされました');
} それ以外 {
  console.log('イベントはキャンセルされませんでした');
}

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章