ホームページ > 記事 > ウェブフロントエンド > JS におけるイベント委任の詳細な分析
最初に小さな関数を実装します。HTML ボタンをクリックした後、メッセージをコンソールに出力します。
この小さな関数を実装するには、ボタンを選択し、addEventListener()
メソッドを使用してイベント リスナーをアタッチする必要があります。
<button id="buttonId">Click me</button> <script> document.getElementById('buttonId') .addEventListener('click', () => console.log('Clicked!')); </script>
上記単一の要素 (特にボタン上でイベントが実行される方法) をリッスンすることです。
複数のボタンのイベントをリッスンする必要がある場合はどうすればよいでしょうか?可能な実装は次のとおりです:
<div id="buttons"> <button class="buttonClass">Click me</button> <button class="buttonClass">Click me</button> <!-- buttons... --> <button class="buttonClass">Click me</button> </div> <script> const buttons = document.getElementsByClassName('buttonClass'); for (const button of buttons) { button.addEventListener('click', () => console.log('Clicked!')); } </script>
Codesandbox で どのように動作するかを確認できます。
ボタン リストは for (ボタンの定数ボタン)
として反復され、新しいリスナーが各ボタンにアタッチされます。さらに、ボタンをリストに追加またはリストから削除した後は、イベント リスナーも手動で削除またはアタッチする必要があります。
もっと良い方法はありますか?
幸いなことに、「イベント委任」パターンを使用すると、複数の要素のイベントをリッスンするのに必要なイベント リスナーは 1 つだけです。
イベント委任によって使用される イベント伝播 メカニズムの詳細。イベント委任がどのように機能するかを理解するには、まずイベント伝播とは何かを理解する必要があります。
以下の HTML のボタンをクリックすると:
<html> <body> <div id="buttons"> <button class="buttonClass">Click me</button> </div> </body> </html>
クリック イベントはいくつの要素で発生しますか?間違いなく、ボタン自体がクリック イベントを受け取ります。そして、すべてのボタンの祖先、document
オブジェクトや window
オブジェクトも受信されます。
クリック イベントの伝播は 3 つのステージに分かれています:
キャプチャ ステージ —— window
から、document
ルート要素から始まり、イベントはターゲット要素の祖先まで伝播します
ターゲット フェーズ - イベントは要素でトリガーされますユーザーによってクリックされました
バブリング フェーズ - 最後に、イベントはターゲット要素の先祖を介してルート要素に至るまでバブリングします document
と ウィンドウ
。
addEventListener
メソッドの 3 番目のパラメータ captureOrOptions
:
element.addEventListener(eventType, handler[, captureOrOptions]);
を使用すると、さまざまなステージからイベントをキャプチャできます。
#captureOrOptions
パラメータが欠落しているか、false
または {capture:false}
##Events の場合にキャプチャします。ターゲット フェーズとバブル フェーズの
または
{capture: true} の場合、リスナーは
キャプチャ フェーズをリッスンします。 イベント。
要素で発生するキャプチャ フェーズのクリック イベントをリッスンします。
document.body.addEventListener('click', () => { console.log('Body click event in capture phase'); }, true);In this# In ##Codesandbox デモ
では、ボタンをクリックしたときにイベントがコンソール内でどのように伝播するかを確認できます。 それでは、イベント伝播は複数のボタン イベントのキャプチャにどのように役立つのでしょうか?
アルゴリズムは単純です。イベント リスナーをボタンの親にアタッチし、ボタンがクリックされたときのバブリング イベントをキャプチャします。これがイベント委任の仕組みです。
3. イベント デリゲート
<div id="buttons"> <!-- Step 1 --> <button class="buttonClass">Click me</button> <button class="buttonClass">Click me</button> <!-- buttons... --> <button class="buttonClass">Click me</button> </div> <script> document.getElementById('buttons') .addEventListener('click', event => { // Step 2 if (event.target.className === 'buttonClass') { // Step 3 console.log('Click!'); } }); </script>Codesandbox デモ
を開いて、[Any] ボタンをクリックすると、 'Click!' メッセージがコンソールに記録されます。 イベント委任の考え方は非常にシンプルです。デリゲート イベント リスナーをボタンに直接アタッチする必要はなく、代わりに親リスナー
以上がJS におけるイベント委任の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。