jQuery イベントデリゲートのサンプル(on)

01. onメソッド

・onメソッドを使用したイベントデリゲート

・イベントデリゲートのサンプル

onメソッドを使用したイベントデリゲート

$(親セレクタ).on (イベント名 , 子セレクタ,function(e){
イベントが発生した時の処理
}

event delegate = (親要素に)イベント処理を委譲します。
指定の親セレクタ配下の子セレクタで指定のイベントが発生した時に、イベントが発生した子要素ではなく、親要素で管理された処理(イベントリスナ)を行います。
親要素に対して1つイベントリスナを登録します。
→複数の子要素１つずつに設定するよりメモリやパフォーマンスを改善します。
→子要素が動的に追加される場合でもその子要素のイベントリスナの実行は可能です。
以前はdelegateメソッドがありましたが非推奨になりました。その代替がonメソッドです。
イベントデリゲートは、イベントバブリングの仕組みを利用しています。
イベントバブリングとは、子要素で発生したイベント(例：clickイベント)が親要素に伝播して親要素のイベント(clickイベント)が発生することです。
以下はjQueryサイトのonメソッドのページです。
http://api.jquery.com/on/

イベントデリゲートのサンプル

文字の「追加」をクリックすると、「☓回目の追加」という文言が動的に追加されていきます。
新規に追加された「☓回目の追加」という文字をクリックしても文言が動的に追加されてます。(最大5回まで)

追加

上記サンプルのコードです。

<div id="d1">
	<p class="p1">追加</p>
</div>
<input type="button" id="btn1" value="クリア">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
	var r = 1;
	$('#d1').on( //親セレクタ
		'click', //イベント
		'.p1',  //子セレクタ
		function() {
			if(r <6 ){
				$('<p class="p1">' + r + '回目の追加</p>')
					.appendTo('#d1');
				r = r + 1;
			}
		}
	);
	$("#btn1").click(function() {
			if(r !=1 ){
				r = 1;
				$("#d1").empty();
				$("#d1").append('<p class="p1">追加</p>');
			}
	});
});
</script>

9行目は、セレクタで1行目を指しています。
10行目はclickイベントを指定しています。
11行目は、セレクタで2行目を指しています。
12行目以降は、イベントが発生した時に実行される処理です。(イベントリスナ)