JQuery事件委托机制之delegate和undelegate的实例分析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JQuery事件委托机制之delegate和undelegate的实例分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2774字，纯文字阅读大概需要4分钟。
内容图文
考虑下面这种场景：如果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!='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">
<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的实例分析的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的JQuery事件委托机制之delegate和undelegate的实例分析全部内容，希望文章能够帮你解决JQuery事件委托机制之delegate和undelegate的实例分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。