JQuery中的事件委托机制:delegate和undelegate
2015-02-03 22:43
417 查看
考虑下面这种场景:如果1个div下面有3个button,点击每个按钮的时候,需要打印出当前按钮的ID。
方式1:使用JQuery选择器,给每个按钮都绑定自己的事件处理函数。
方式2:利用事件委托机制,只给按钮的父元素绑定事件。
delegate这个API的函数签名如下:
selector:
代表JQuery中的选择器,用来过滤触发事件的元素。上面的parent元素下面有a、b、c这3个按钮,如果点击按钮b的时候,不打印出它的ID。那么可以通过如下代码实现:
type:
附加到元素的一个或多个事件,由空格分隔多个事件值。
data
传递给事件处理函数的参数值。
fn
当事件发生时候,调用的处理函数。
delegate()还有一个非常重要的性质:使用delegate() 方法的事件处理程序适用于当前已经存在或未来新增的元素。
下面的代码中,我们点击test按钮会新生成1个button,当点击这个新生成的button时,仍然会打印出它的id。
那么delegate()是怎么做到的呢?很简单,利用javascript中的事件冒泡机制。当子元素产生1个事件的时候,如果没有禁止这个事件的传播,那么父元素也会感知到这个事件(父元素上的事件处理函数被调用)。而且通过Event对象,能够拿到最初触发事件的元素。下面的代码,我们自己实现了1个简易的事件委托机制。
delegate和undelegate,很类似于bind和unbind,这里提一下:使用undelegate取消事件委托的时候,也可以使用事件命名空间机制。这篇文章中用bind和unbind作为例子,详细的介绍了事件命名空间机制,以及使用方式。
<div 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> </div>
方式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")); });
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('<input type="button" id="d" value="4"></input>'); }); }) </script> <body> <input type="button" id="test" value="test"> <div 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> </div> </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> <div 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> </div> </body>
delegate和undelegate,很类似于bind和unbind,这里提一下:使用undelegate取消事件委托的时候,也可以使用事件命名空间机制。这篇文章中用bind和unbind作为例子,详细的介绍了事件命名空间机制,以及使用方式。
相关文章推荐
- JQuery中的事件委托机制:delegate和undelegate
- jQuery委托事件delegate()方法
- 委托事件和jquery中的delegate方法
- 关于jquery的事件委托-bind,live,delegate,on的区别发展
- jQuery的事件委托方法on、live、delegate之间有什么区别?
- jquery的事件委托-bind,live,delegate,on的区别
- 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]
- jQuery事件-委托机制、事件对象
- 根据jquery解密js事件委托机制
- jQuery的事件委托机制和事件绑定的区别
- Jquery:delegate、undelegate事件
- 事件/委托机制(event/delegate)(Unity3D开发之十七)
- Unity3D研究之在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信引入中间层
- 事件冒泡机制与委托机制,jQuery动态绑定
- jquery 事件委托 delegate
- 事件委托 on和delegate的适用区别 jquery
- 【Unity3D技巧】在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信
- jquery live() delegate() on() 事件委托的一些区别
- 浅谈jQuery代码优化之事件委托(事件绑定)——bind()|live()|delegate()|on()|off()|one()方法
- 关于jquery的事件委托-bind,live,delegate,on的区别发展