JavaScript イベント委任の技術原則

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

いくつかのサブ要素を持つ UL 要素があるとします。

<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

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

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

// 找到父元素，添加监听器...
document.getElementById("parent-list").addEventListener("click",function(e) {
	// e.target是被点击的元素!
	// 如果被点击的是li元素
	if(e.target && e.target.nodeName == "LI") {
		// 找到目标，输出ID!
		console.log("List item ",e.target.id.replace("post-")," was clicked!");
	}
});

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

// 获得父元素p, 添加监听器...
document.getElementById("myp").addEventListener("click",function(e) {
	// e.target是被点击的元素
	if(e.target && e.target.nodeName == "A") {
		// 获得CSS类名
		var classes = e.target.className.split(" ");
		// 搜索匹配!
		if(classes) {
			// For every CSS class the element has...
			for(var x = 0; x < classes.length; x++) {
				// If it has the CSS class we want...
				if(classes[x] == "classA") {
					// Bingo!
					console.log("Anchor element clicked!");

					// Now do something here....

				}
			}
		}

	}
});

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

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

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

(英語: davidwalsh.)

推奨チュートリアル: 「javascript 基本チュートリアル」

以上がJavaScript イベント委任の技術原則の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。