delegate委托事件(动态创建元素注册事件)
Posted 麦兜家园
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了delegate委托事件(动态创建元素注册事件)相关的知识,希望对你有一定的参考价值。
有这样一个小例子:
<!--需求:给li里的a标签注册点击事件,并且点击“添加”按钮,新增li标签,新增的li里的a同样有注册事件--> <input type="button" id="btn" value="添加"/> <ul class="box"> <li> <a href="javascript:void(0)">点击</a> </li> <li> <a href="javascript:void(0)">点击</a> </li> <li> <a href="javascript:void(0)">点击</a> </li> <li> <a href="javascript:void(0)">点击</a> </li> </ul>
正常注册点击事件给每个a的话,那么就满足不了最后一个“点击新的”,它就不会被注册事件,那么想要解决这个问题,就必须用到委托事件delegate,接下来说一下delegate事件的应用。
delegate方法常用的三个参数是:
selector:事件的最终执行元素
types:事件的类型
fn:所要执行的函数内容
那么就针对上面的案例写一下:点击每一个a,让其颜色变红,并且点击新增的a同样有这个效果
js如下:
<script src="js/jquery-1.11.3.min.js"></script> <script> $(function(){ $("#btn").click(function(){ $("<li><a href=\'javascript:void(0)\'>点击新的</a></li>").appendTo("ul") }); /*$(".box li a").click(function(){ $(this).css("color","red");给a直接注册点击事件是满足不了的 });*/ $(".box").delegate("a","click",function(){ $(this).css("color","red"); }); //原理:是给box注册委托事件但是最终是有a来执行 }) </script>
这样效果就实现了
所以委托事件的优点有两个:
1、动态创建的元素也可添加上事件;
2、给多个元素注册事件也仅仅是注册一次
好了,关于委托事件就是这样了,当然也是比较简单的例子,可根据具体情况具体应用。
以上是关于delegate委托事件(动态创建元素注册事件)的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Direct and delegated events 直接事件与委托事件
事件委托(event delegation) 或叫 事件代理
JavaScript------事件委托(event delegation)