JQuery中的事件委托机制:delegate和undelegate

页面导航:首页 > 网络编程 > JavaScript > JQuery中的事件委托机制:delegate和undelegate

JQuery中的事件委托机制:delegate和undelegate

来源: 作者: 时间:2016-02-03 09:20 【

考虑下面这种场景:如果1个div下面有3个button,点击每个按钮的时候,需要打印出当前按钮的ID。 方式1:使用JQuery选择器,给每个按钮都绑定自己的事件处理函数。$( parent :button) click(

考虑下面这种场景:如果1个div下面有3个button,点击每个按钮的时候,需要打印出当前按钮的ID。


 

方式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!='b'],click,{},function(){
	alert($(this).attr(id));
});www.2cto.com

 

 

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('');
			
		});
	})
</script>

 

 


那么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>



delegate和undelegate,很类似于bind和unbind,这里提一下:使用undelegate取消事件委托的时候,也可以使用事件命名空间机制。这篇文章中用bind和unbind作为例子,详细的介绍了事件命名空间机制,以及使用方式。

 


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<