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

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

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

考慮下面這種場景:如果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);
});

fn

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

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