ホームページ >ウェブフロントエンド >jsチュートリアル >JS におけるイベント委任の詳細な分析
JS におけるイベント委任の詳細な分析
- 青灯夜游転載
- 2021-02-01 17:50:341829ブラウズ
イベント委任を実行する必要があるのはなぜですか?
最初に小さな関数を実装します。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 の場合にキャプチャします。ターゲット フェーズとバブル フェーズの パラメータが - true
または{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 サイトの他の関連記事を参照してください。