Rumah >hujung hadapan web >tutorial js >JQuery事件委托机制之delegate和undelegate的实例分析

JQuery事件委托机制之delegate和undelegate的实例分析

黄舟asal: 2017-06-26 10:07:281213semak imbas

考虑下面这种场景：如果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作为例子，详细的介绍了事件命名空间机制，以及使用方式。

Atas ialah kandungan terperinci JQuery事件委托机制之delegate和undelegate的实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery中关于用on代替delegate以及live的写法区别详解Artikel seterusnya：jQuery delegate事件监听无效的解决办法

Artikel berkaitan

Lihat lagi