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、给多个元素注册事件也仅仅是注册一次

好了，关于委托事件就是这样了，当然也是比较简单的例子，可根据具体情况具体应用。

原文地址：https://www.cnblogs.com/web001/p/8428318.html