首頁 > 文章 > web前端 > JQuery事件委託機制之delegate與undelegate的實例分析

JQuery事件委託機制之delegate與undelegate的實例分析

黄舟原創: 2017-06-26 10:07:281120瀏覽

考慮下面這種場景：如果1個p下面有3個button，點擊每個按鈕的時候，就需要列印出目前按鈕的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中的選擇器，用來過濾觸發事件的元素。上面的parent元素下面有a、b、c這3個按鈕，如果點選按鈕b的時候，不印出它的ID。那麼可以透過以下程式碼實現：

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

#type:

附加到元素的一個或多個事件，由空格分隔多個事件值。

data

#傳遞給事件處理函數的參數值。

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

#當事件發生時候，呼叫的處理函數。

delegate()還有一個非常重要的性質：使用delegate() 方法的事件處理程序適用於目前已經存在或未來新增的元素。

在下面的程式碼中，我們點擊test按鈕會新生成1個button，當點擊這個新生成的button 時，仍然會印出它的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中的事件冒泡機制。當子元素產生1個事件的時候，如果沒有禁止這個事件的傳播，那麼父元素也會感知到這個事件(父元素上的事件處理函數被呼叫)。而且透過Event物件，能夠拿到最初觸發事件的元素。下面的程式碼，我們自己實作了1個簡易的事件委託機制。

<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取消事件委託的時候，也可以使用事件命名空間機制。這篇文章中以bind和unbind作為例子，詳細的介紹了事件命名空間機制，以及使用方式。

以上是JQuery事件委託機制之delegate與undelegate的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery中關於用on代替delegate以及live的寫法區別詳解下一篇：jQuery中關於用on代替delegate以及live的寫法區別詳解

看更多