有这样一个小例子：
<!--需求：给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、给多个元素注册事件也仅仅是注册一次
好了，关于委托事件就是这样了，当然也是比较简单的例子，可根据具体情况具体应用。
