イベントリスナーとは何ですか?
イベントリスナーは、イベントの発生を待ってから応答する JavaScript の関数です。JavaScript は、デベロッパーがインタラクティブなウェブページを作成するために使用するプログラミング言語です。JavaScript のイベントリスナー関数を使用すると、マウスクリック、キーボードクリック、ウィンドウのサイズ変更などのイベントに対するカスタムレスポンスを作成できます。リアルタイムのイベントを待って応答するプログラミングパラダイムは、イベントハンドリングと呼ばれます。
イベントリスナー関数の構文はどのようなものですか?
イベントリスナー関数は、他の JavaScript 関数と同様の特徴を有しています。アクティブ化すると、イベントの処理に必要なアクションが実行されます。たとえば、イベントリスナー関数は、表示されるテキストを変更したり、登録フォームから情報を収集したり、データベースにデータを保存したりできます。
イベントリスナー構文
イベントリスナー関数は、次の例のように適切な JavaScript 構文に従います。
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
この例は、RespondMouseClick イベントリスナー関数を示しています。イベントリスナーの目的を反映して関数名を記述するのが一般的です。この関数では、イベントが発生したときに特定のアクションを実行するコードを記述します。この例では、関数は HTML 要素 textdisplay1 に MouseClick happened というテキストを追加します。
イベントハンドラー構文
あるいは、次の例のように、イベントハンドラー関数を使用してアクティブ化されたイベントに応答することもできます。
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
これにより、特定の要素からの複数のタイプのイベントを 1 つの関数で管理できます。
たとえば、イベントリスナーを登録して、イベントベースのアプリケーションであらゆるタイプのブロックチェーンイベントを処理できます。 詳細については、Amazon Managed Blockchain を使用したイベントベースのアプリケーションの構築についてお読みください。
イベントリスナーを追加する方法
イベントリスナーは、それぞれの JavaScript 要素に追加した後にのみアクティブ化されます。そのためには、次のような構文を使用できます。
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
たとえば、デベロッパーは次の関数を呼び出してクリックイベントリスナーをボタン要素にバインドできます。
btn.addEventListener("click", RespondMouseClick);
既存のイベントハンドラーを上書きせずに、特定のイベントオブジェクトに複数のイベントリスナーを追加することもできます。
たとえば、Amazon Web Services (AWS) では、デベロッパーが AWS.Request オブジェクトに対して複数のコールバックをチェーンできます。詳細については、「AWS でリクエストオブジェクトイベントリスナーを使用する方法」をご覧ください。
イベントを追加するためのパラメーター
前の構文のパラメーターの説明は次のとおりです。
- イベントパラメータは、クリック、変更、マウスオーバー、キーダウン、ロードなどの有効な JavaScript イベントです。
- リスナーパラメータは、特定のイベントに応答するために作成されたイベントコールバックまたは JavaScript 関数です。
- useCapture パラメーターは、イベントの伝播モードを示すオプションのパラメーターです。ブール値を受け入れ、true の場合はキャプチャ、false の場合はバブリングがアクティブになります。このパラメータのデフォルト値は false に設定されています。
- オプションパラメータは、リスナーの動作を表すキャプチャモードやリジェクトシグナルなど、いくつかのオプション値で構成されています。
イベントリスナーを削除する方法
イベントリスナーは、関連する JavaScript 要素から削除するまでアクティブなままです。そのためには、次の構文を使用できます。
element.removeEventListener(type, listener, useCapture);
イベントリスナーの削除パラメーターは、イベントリスナーの追加に使用するパラメーターと似ています。イベントリスナーを削除するときは、同じタイプ、リスナー、そして useCapture パラメーターを指定する必要があります。そうしないと、イベントリスナーはアクティブなままとなり、今後のイベントでもトリガーされ続けます。
たとえば、次のコードを使用してイベントを追加できます。
button.addEventListener("click", RespondMouseClick, true);
しかし、次のコードを適用しても、イベントリスナーは削除されません。これは、useCapture の値がボタンオブジェクトに登録されている値と異なるためです。
button.removeEventListener("click", RespondMouseClick, false);
イベントを正常に削除してトリガーされないようにするには、次のコードを使用できます。
button.removeEventListener("click", RespondMouseClick, true);
ネストされたイベントリスナー関数の仕組み
ネストされたイベントリスナーは、さまざまな階層レイヤーの HTML 要素に追加されるイベントハンドラーです。
次の HTML 例では、ドキュメントは基になる親要素を所有し、親要素は子要素を所有しています。
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
複雑なウェブアプリケーションには、それぞれのイベントリスナー関数を持つ複数の親子レイヤーがある場合があります。特定のイベントが発生すると、さまざまなレイヤーで特定の順序でイベントリスナーがトリガーされます。たとえば、子ボタンをクリックすると、マウスクリックをキャプチャするすべてのハンドラーにイベントが伝播されます。
イベントは、バブリングとキャプチャの 2 つのモードで伝播できます。
イベントバブリング
バブリングは JavaScript イベント処理のデフォルトモードです。イベントを最も内側のレイヤーから最も外側のレイヤーに伝播します。
例えば、ユーザーが子セクションのテキストボックスにカーソルを合わせた場合。アプリケーションは以下の順序でイベントを渡します。
- 子オブジェクトのイベントリスナーは、マウスホバーイベントを処理します。
- 次に、親イベントリスナーがイベントを処理し、ドキュメントのイベントリスナーに制御を渡します。
イベントバブリングを設定するには、次の構文を使用します。
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
イベントキャプチャ
イベントキャプチャは JavaScript の特別なイベント処理モードで、最も内側のレイヤーから最も外側のレイヤーに伝播します。イベントが内側のレイヤーのターゲット要素に到達すると、イベント処理モードはバブリングに変わります。次に、バブリングによってイベントが最上位のレイヤーに伝播されます。
例えば、ユーザーが子ボタンをクリックすると、次のようなシーケンスが開始されます。
- ドキュメントイベントリスナーはマウスクリックイベントを処理し、続いて親イベントハンドラーを処理します。
- イベントはターゲット要素、つまりボタンに到達します。ボタンのイベントリスナーがイベントを処理します。
- イベント処理はキャプチャモードからバブリングモードに切り替わります。
- 同じマウスクリックイベントは、ドキュメントで終了する前に親でイベントハンドラを起動します。
バブリングとキャプチャーの選び方
バブリングとキャプチャにより、イベントを異なる方法で処理できます。アプリケーション内のほとんどのイベントはキャプチャだけで十分なので、バブリングはほとんど使用されません。
バブリングとキャプチャのどちらを選ぶかを決めるときは、イベントの伝播フローと、それがアプリケーションのプログラミングロジックとどのように連携するかを考慮する必要があります。
たとえば、2 つの子要素で構成される親フォームを考えてみましょう。第一の要素では、第二の要素でイベントが発生した際に、即座に更新する必要があります。この場合は、キャプチャモードを使用します。これにより、親イベントリスナーがイベントを処理して最初の要素を更新することが保証されます。次に、2 番目の子要素のイベントリスナーに制御を渡します。
ネストされたイベントリスナー関数でのイベントの伝播を止めるにはどうすればよいですか?
イベントは、ネストされたリスナー配置で最終宛先に到達するまで伝播します。イベントがさらに伝播することを防ぐために、特定のメソッドを使用する必要があります。
次のメソッドでは、イベントリスナーでイベントを停止します。
event.stopPropagation();
たとえば、子ボタンで StopPropagation を呼び出すと、マウスクリックイベントは親レベルやドキュメントレベルには伝播しません。そのため、上位レベルのイベントリスナーはトリガーされません。
すべてのイベントの伝播を停止
StopPropagation は、現在のタイプのイベントの伝播のみを停止します。オブジェクトに異なるタイプのイベントリスナーが登録されている場合、それらは StopPropagation を呼び出してもトリガーされます。
特定のオブジェクトに関連するすべてのイベントを停止するには、次のように StopImmediatePropagation メソッドを使用します。
event.stopImmediatePropagation();
特定のイベントリスナーが StopImmediatePropagation を呼び出すと、そのオブジェクトに関連する他のイベントリスナーはトリガーされません。
AWS がお客様の JavaScript の要件をサポートする方法
Amazon Web Services (AWS) では AWS SDK for JavaScript を提供しているため、ライブラリや API を使用してアプリケーション内のサービスを簡単に使用できます。
SDK を使用して、サーバーサイド、Web、モバイル Web アプリケーションを開発できます。SDK は JavaScript ランタイム、Node.JS、React Native、およびクロスランタイムをサポートしています。これにより、デベロッパーは同じクライアントサービスパッケージを異なるプラットフォームで実行できます。
SDK を使用するその他の利点は次のとおりです。
- SDK は TypeScript で記述されています。これにより、静的な型チェック、クラスやモジュールのサポートといったメリットが得られます。
- SDK には、カスタムアクションを導入できるミドルウェアスタックが用意されています。
- SDK はモジュラーアーキテクチャを採用しています。これにより、必要なパッケージのみを使用してアプリケーションのパフォーマンスを最適化できます。
今すぐ AWS アカウントにサインアップして JavaScript アプリケーションの使用を開始しましょう。
