委任の概念
1 つの親内に多くの要素があり、それらのイベントを処理したい場合は、ハンドラーを各要素にバインドしないでください。代わりに、シグナル ハンドラーを親にバインドし、event.target から子を取得します。
では、JavaScript Event Delegation とは何でしょう?
イベント委任は、単一のイベント リスナーを親要素にアタッチする単純な手法です。このリスナーは、セレクターに一致するすべての子 (子が現在存在するか、将来追加されるかに関係なく) に対して起動します。
イベント委譲は、見過ごされがちな JavaScript イベントの 2 つの機能、イベントバブリングとターゲット要素を利用します。
イベントバブリングとは？
イベントバブリングでは、イベントは最初に最も内側の要素によってキャプチャおよび処理され、次に外側の要素に伝播されます
対象元素とは？
イベントのターゲット要素は元の要素であり、イベント オブジェクトのプロパティに格納されます。
例
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item 1</a></li>
<li><a href="/local/path/1">Item 2</a></li>
<li><a href="/local/path/2">Item 2</a></li>
<li><a href="http://domain4.com">Item3</a></li>
</ul>
</div>
#list グループのアンカーをクリックすると、そのテキストがコンソールに記録されます。通常、.on() メソッドを使用して、各アンカーのクリック イベントに直接バインドできます。
// attach a directly bound event
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
これは問題なく機能しますが、欠点もあります。上記のリスナーを既にバインドした後に新しいアンカーを追加するとどうなるかを考えてみましょう。
// add a new element on to our existing list
$( "#list" ).append( "<li><a href='#'>Item 5</a></li>" )
新しく追加した項目をクリックしても、何も起こりません。これは、前にアタッチした直接バインドされたイベント ハンドラーによるものです。ダイレクト イベントは、.on() メソッドが呼び出された時点でのみ要素に関連付けられます。この場合、.on() が呼び出されたときに新しいアンカーが存在しなかったため、イベント ハンドラーを取得しません。
イベントがどのようにバブリングするかはわかっているので、委任されたイベントを作成できます。
// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
a 部分をセレクターから .on() メソッドの 2 番目のパラメーター位置に移動したことに注目してください。この 2 番目のセレクター パラメーターは、指定されたイベントをリッスンするようにハンドラーに指示し、それが認識されると、そのイベントのトリガー要素が 2 番目のパラメーターと一致するかどうかを確認します。この場合、トリガー イベントは、そのパラメーターに一致するアンカー タグです。一致するため、匿名関数が実行されます。既存のアンカー タグのみに不明な数の直接バインドされたイベントをアタッチする代わりに、子アンカーのクリックをリッスンするシングル クリック イベント リスナーをアタッチしました。
イベント委任の利点は何ですか?
動的に作成された 500 の要素がイベント ハンドラーにバインドされるのではなく、1 つのイベント リスナーのみをページにアタッチします。
これが、イベント委任の背後にある概念を視覚的に理解し、委任の力を納得させるのに役立つことを願っています! 訪問: http://www.scriptcafe.in/2014/03/what-is-event-delegation-in-jquery.html