JavaScript dispatchEvent

概要: このチュートリアルでは、`Event` コンストラクタと `dispatchEvent()` メソッドを使用して、プログラムでイベントを作成およびディスパッチする方法を学習します。

通常、イベントはマウスクリックやキー押下などのユーザーアクションによって生成されます。さらに、イベントはコードから生成することもできます。

プログラムでイベントを生成するには、次の手順に従います。

• まず、`Event` コンストラクタを使用して新しい `Event` オブジェクトを作成します。
• 次に、`element.dispatchEvent()` メソッドを使用してイベントをトリガーします。

Event コンストラクタ

新しいイベントを作成するには、次のように `Event` コンストラクタを使用します。

let event = new Event(type, [,options]);Code language: JavaScript (javascript)

`Event` コンストラクタは2つのパラメータを受け入れます。

type

`'click'` などのイベントタイプを指定する文字列です。

options

2つのオプションのプロパティを持つオブジェクトです。

• `bubbles`：イベントがバブルするかどうかを決定するブール値です。`true` の場合、イベントはバブルされ、そうでない場合はバブルされません。
• `cancelable`：`true` の場合、イベントがキャンセル可能かどうかを指定するブール値です。

デフォルトでは、`options` オブジェクトは次のとおりです。

{ bubbles: false, cancelable: false}Code language: CSS (css)

たとえば、次のコードはデフォルトの `options` オブジェクトを使用して新しい `click` イベントを作成します。

let clickEvent = new Event('click');Code language: JavaScript (javascript)

dispatchEvent メソッド

イベントを作成した後、次のように `dispatchEvent()` メソッドを使用してターゲット要素でイベントを発生させることができます。

element.dispatchEvent(event);Code language: CSS (css)

たとえば、次のコードは `click` イベントを作成してボタンで発生させる方法を示しています。

HTML

<button class="btn">Test</button>Code language: HTML, XML (xml)

JavaScript

let btn = document.querySelector('.btn');

 btn.addEventListener('click', function () {
        alert('Mouse Clicked');
 });

let clickEvent = new Event('click');
btn.dispatchEvent(clickEvent);
Code language: JavaScript (javascript)

デモを見るには、このリンクをクリックしてください。.

この例では、イベントハンドラは、`click` イベントがユーザーアクションによって生成されたかのように実行されます。

イベントがユーザーアクションからのものである場合、`event.isTrusted` プロパティは `true` に設定されます。イベントがコードによって生成された場合、`event.isTrusted` は `false` になります。したがって、`event.isTrusted` プロパティの値を調べて、イベントの「信頼性」を確認できます。

`Event` は `UIEvent` の基本型であり、`MouseEvent`、`TouchEvent`、`FocusEvent`、`KeyboardEvent` などの他の特定のイベントタイプの基本型です。

これらのコンストラクタはイベントに固有のより多くの情報を提供するため、汎用の `Event` タイプを使用する代わりに、`MouseEvent` のような特殊なイベントコンストラクタを使用することをお勧めします。

たとえば、`MouseEvent` イベントには、イベントが発生したビューポートに対する水平方向および垂直方向の座標を指定する `clientX` や `clientY` などの他の多くのプロパティがあります。

let clickEvent = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    clientX: 150,
    clientY: 150
});Code language: JavaScript (javascript)

次のリンクは、MouseEvent のプロパティの完全なリストを示しています。

まとめ

• `MouseEvent` などの特定のイベントコンストラクタを使用し、要素で `dispatchEvent()` メソッドを呼び出して、コードからイベントを生成します。
• イベントがコードまたはユーザーアクションから生成されたかどうかを調べるには、`event.isTrusted` を使用します。