JavaScript イベント delegation_javascript スキルの技術原則の例

今日の JavaScript テクノロジーの世界で最も注目されているテクノロジーの 1 つは、「イベント委任」です。イベント委任手法を使用すると、特定の各ノードにイベント リスナーを追加する必要がなく、代わりにイベント リスナーがその親要素に追加されます。イベント リスナーは、子要素から発生したイベントを分析し、そのイベントがどの子要素からのものかを見つけます。基本的な概念は非常にシンプルですが、イベント委任がどのように機能するかを理解していない人はまだたくさんいます。ここでは、イベント委任がどのように機能するかを説明し、純粋な JavaScript での基本的なイベント委任の例をいくつか示します。

複数の子要素を持つ UL 要素があるとします。

コードをコピーします コードは次のとおりです。

• アイテム 1
post -2">アイテム 2

• アイテム 3


• アイテム 4< ; /li>
  
• 項目 5


• 
  ; /ul>
  
  
  

また、各子要素がクリックされると、異なるイベントが発生すると仮定します。独立した各 li 要素にイベント リスナーを追加できますが、これらの li 要素が削除または追加される場合があり、特にイベントをリッスンするコードが別の要素に配置されている場合、新しいイベントまたは削除されたイベントをリッスンすることは悪夢になります。アプリケーションに配置します。しかし、リスナーを親要素に配置するとどうなるでしょうか?どの子要素がクリックされたかをどうやって知ることができますか?

シンプル: 子要素のイベントが親 ul 要素にバブルアップするときに、イベント オブジェクトの target 属性を確認し、実際にクリックされたノード要素の参照をキャプチャできます。以下は、イベント委任のプロセスを示す非常に単純な JavaScript コードです:

コードをコピーします コードは次のとおりです:

// 親要素を見つけてリスナーを追加します...
document.getElementById("parent-list").addEventListener("click",function(e) {
// e .target はクリックされた要素です!
// li 要素がクリックされた場合
if(e.target && e.target.nodeName == "LI") {
// Findターゲットと出力 ID!
console.log("リスト項目 ",e.target.id.replace("post-")," がクリックされました!")
}
}); 🎜>


最初のステップは、イベント リスナーを親要素に追加することです。イベントがリスナーをトリガーするときは、イベントのソースを確認し、li 以外の子要素イベントを除外します。 li 要素であればターゲットを見つけました! li 要素でない場合、イベントは無視されます。この例は非常に単純で、UL と li は標準的な親子の組み合わせです。いくつかの異なる要素の組み合わせを試してみましょう。内部に多くの子要素を持つ親要素 div があるとします。ただし、注目すべきは、CSS クラス「classA」を持つ内部の A タグです。

コードをコピー コードは次のとおりです:

// 親要素 DIV を取得し、リスナーを追加します...
document.getElementById("myDiv") .addEventListener ("click",function(e) {
// e.target はクリックされた要素です
if(e.target && e.target.nodeName == "A") {
// CSS クラス名を取得します
var class = e.target.className.split(" ");
// 一致するものを検索します!
if(classes) {
// すべての CSS クラスの要素has. ..
for(var x = 0; x // 必要な CSS クラスがある場合...
if(classes[x] = = " classA") {
// ビンゴ!
console.log("アンカー要素をクリックしました!")

// ここで何かをしてください....

}
}
}

}
});


上記の例では、タグ名だけでなく CSS クラス名も比較されます。が比較されます。もう少し複雑ですが、それでも非常に代表的なものです。例えば、Aタグ内にspanタグがあった場合、そのspanが対象要素となります。このとき、DOM ツリー構造をたどって、その中に A.classA 要素があるかどうかを確認する必要があります。

ほとんどのプログラマーは jQuery やその他のツール ライブラリを使用して DOM 要素とイベントを処理するため、ここでのツール ライブラリは高度な委任メソッドと要素スクリーニング メソッドを提供するため、内部でイベント委任メソッドを使用することをお勧めします。

この記事が JavaScript イベント委任の舞台裏の原則を理解するのに役立ち、イベント委任の強力な使用法も感じていただければ幸いです。