JQueryイベント委任機構のデリゲートとアンデリゲートの分析例-jsチュートリアル-php.cn

JQueryイベント委任機構のデリゲートとアンデリゲートの分析例

黄舟

リリース： 2017-06-26 10:07:28

オリジナル

1208 人が閲覧しました

次のシナリオを考えてみましょう: 1 p の下に 3 つのボタンがある場合、各ボタンがクリックされたときに、現在のボタンの ID を出力する必要があります。

<p id="parent">
	<input type="button" id="a" value="1"></input>
	<input type="button" id="b" value="2"></input>
	<input type="button" id="c" value="3"></input>
</p>

ログイン後にコピー

方法 1: JQuery セレクターを使用して、独自のイベント処理関数を各ボタンにバインドします。

$("#parent :button").click(function(){
	alert($(this).attr("id"));
})

ログイン後にコピー

方法 2: イベント委任メカニズムを使用して、イベントをボタンの親要素にのみバインドします。

$("#parent").delegate(":button","click",function(){
	alert($(this).attr("id"));
});

ログイン後にコピー

delegate この API の関数シグネチャは次のとおりです:

delegate(selector, [type], [data], fn)

ログイン後にコピー

selector:

は、イベントをトリガーする要素をフィルターするために使用される JQuery のセレクターを表します。上の親要素の下に 3 つのボタン a、b、c があります。ボタン b をクリックすると、その ID は出力されません。これは、次のコードによって実現できます:

$("#parent").delegate(":button[id!=&#39;b&#39;]","click",{},function(){
	alert($(this).attr("id"));
});

ログイン後にコピー

type:

スペースで区切られた複数のイベント値を含む、要素に関連付けられた 1 つ以上のイベント。

data

イベント処理関数に渡されるパラメータの値。

$("#parent").delegate(":button","click",{name:123},function(event){
	alert(event.data.name);
});

ログイン後にコピー

イベントの発生時に呼び出されるハンドラー関数。

delegate() には非常に重要なプロパティもあります。delegate() メソッドを使用するイベントハンドラーは、現在存在する要素、または将来追加される要素に適用できます。

以下のコードでは、テストボタンをクリックすると、新しいボタンが生成され、この新しく生成されたボタンをクリックすると、その ID が出力されます。

<script src="jquery-1.11.1.js"></script>
<script>
	$(function(){
	
		$("#parent").delegate(":button","click",function(event){
			alert($(this).attr("id"));
		});
		
		
		$("#test").click(function(event){
			$("#parent").append(&#39;<input type="button" id="d" value="4"></input>&#39;);
			
		});
	})
</script>

<body>

	<input type="button" id="test" value="test">
	<p id="parent">
		<input type="button" id="a" value="1"></input>
		<input type="button" id="b" value="2"></input>
		<input type="button" id="c" value="3"></input>
	</p>
</body>

ログイン後にコピー

では、delegate() はどのように行うのでしょうか?これは非常に簡単で、javascript のイベントバブリングメカニズムを使用します。子要素がイベントを生成するとき、このイベントの伝播が禁止されていない場合、親要素もこのイベントを認識します (親要素のイベントハンドラーが呼び出されます)。そして、Eventオブジェクトを通じて、最初にイベントをトリガーした要素を取得できます。以下のコードでは、簡単なイベント委任メカニズムを独自に実装しました。

<script src="jquery-1.11.1.js"></script>
<script>
	$(function(){
	
		$("#parent").click(":button",function(event){
			
			// target是最初触发事件的DOM元素。
			var domId = event.target.id;
			
			// 过滤元素
			var filter = event.data;

			if($(event.target).is(filter))
			{
				alert(domId);
			}
			
		});
	
	})
</script>

<body>

	<p id="parent">
		<input type="button" id="a" value="1"></input>
		<input type="button" id="b" value="2"></input>
		<input type="button" id="c" value="3"></input>
		<input type="text" id="d" value="d"></input>
	</p>
</body>

ログイン後にコピー

delegate と undelegate は、bind と unbind に非常によく似ています。ここで触れておきますが、undelegate を使用してイベントの委任をキャンセルする場合、イベント namespace メカニズムも使用できます。この記事では、バインドとバインド解除を例として、イベント名前空間メカニズムとその詳細な使用方法を紹介します。

以上がJQueryイベント委任機構のデリゲートとアンデリゲートの分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。