JavaScriptイベント委任を使用する方法と理由

JavaScriptでイベント委任メソッドを使用する方法、理由、および方法を学びます。

JavaScriptイベント委任とは何ですか？いつ使用する必要がありますか？

つまり、イベント委任はJavaScriptメソッドであり、シングルを使用するだけで子要素を操作できます。 親要素のイベントリスナー。イベント委任を使用すると、すべての子要素にイベントハンドラーを追加する必要がなくなりますが、それでもそれらを見つけて操作することができます。

なぜこれが強力なのかがすぐにわかります。

リスト内にアイテムのリストがあるとします。ユーザーがいずれかのリストアイテムをクリックすると、何かが発生します。

それを行う2つの異なる方法を確認しましょう。

各要素にイベントリスナーをアタッチします

リスト上の個々の要素アイテムにアクセスする一般的な方法は、それらをループすることです。 for ループ。次に、各要素にイベントリスナーをアタッチします：

let allExerciseItems = document.querySelectorAll(".exercise-item")

for (let exerciseItem of allExerciseItems) {
 exerciseItem.addEventListener("click", function(event) {
  // Do something with target child element
  event.target.classList.toggle("exercise-complete")
 });
}

例

https://codepen.io/StrengthandFreedom/pen/KBZezV/

イベント委任を使用してアイテムにアクセスする

イベントの委任は、上記のforループの例とはまったく異なります。アクセスしたい各要素を反復（ループ）する代わりに、次のように親要素をターゲットにするだけです。

// Get parent element, add a click event listener
document.querySelector(".exercise-list").addEventListener("click", function(event) {
  if(event.target.classList.contains('exercise-item')) {
  // Do something with target child element
  event.target.classList.toggle('exercise-complete')
  }
})

CodePenの例。注：classList.containsの代わりに element.matches API matches()を使用できます セレクターの柔軟性を高める必要がある場合。

ご覧のとおり、結果はまったく同じです。これでいずれかのエクササイズ要素アイテムをクリックすると、exercise-completeが切り替わります。 クラス。異なるのは、この結果を達成するために使用した方法です。

では、なぜイベント処理+ forループメソッドの代わりにイベント委任メソッドを使用する必要があるのでしょうか？

次にそれについて話し合いましょう！

イベントの委任とパフォーマンス

1日、1時間、さらには1分あたり数百または数千の動的に作成された要素があるWebアプリケーションを扱っていると想像してください。例として、ホテル予約用の予約カレンダーがあります。または、最適なユーザーエクスペリエンスを提供するために頻繁なライブ更新を必要とするTwitterのようなソーシャルメディアプラットフォーム。

Web UIのすべての要素にイベントリスナーがアタッチされている場合、このタイプのシナリオはすぐにハードウェアを集中的に使用する可能性があります。

これらのイベントリスナーはすべて、ユーザーのCPUを占有する可能性があります。それらは、メモリ内に膨大な量の関数参照を配置する原因となる可能性があります。これにより、メモリリークが発生し、一般的なパフォーマンスが低下する可能性があります。

GC（ガベージコレクション）についてはよくわかりません。私には、多かれ少なかれJavaScript（高級プログラミング言語）を書くだけの贅沢がありました。しかし、私が知っていることの1つは、さまざまなベンダーのブラウザー（Chrome、FireFoxなど）が原因で、ブラウザーのGCが予測できない可能性があることです。そしてもちろん、無数のデバイス（スマートフォン、ラップトップなど）。

ガベージコレクション

要するに、ガベージコレクションは一種のコンピュータメモリ管理です。ガベージコレクターは、そこにあるだけの古い/未使用のコードを削除しようとし、コンピューターのメモリをクロックアップします。プログラミング言語やシステムごとに、数え切れないほどのガベージコレクターがあります。

ループの例で見たように、すべてにイベントリスナーをアタッチすると、Webアプリに必要なガベージコレクションの量が増えます。これにより、ほとんどの場合、パフォーマンスが低下します。

シングルを使用すると、通常、パフォーマンスが向上します。 すべての子要素にイベントリスナーをアタッチするのではなく、子要素のすべてのクリックをリッスンする親要素のイベントリスナー。