关于delegate事件委托怎么用

            给每个li添加点击事件，每次点击都要循环遍历一遍，如果有很多li 就会影响性能。

            先来看看普通函数怎么实现点击事件
    
                <div class="box">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <input class='btn' type="button" value="点击添加">
                   //普通的点击事件
                 $(function(){
                     $("li").click(function(){
                         $(this).css('background','red')
                     });  
                 });
               // delegate 事件委托:
                $(function(){
                    $('ul').delegate("li",'click',function(ev){
                        $(this).css('background','red')
                        //这里的this 只的是li,那怎么找到ul呢？
                        $(ev.delegateTarget).css('background','green')//这个可以找到委托人ul
                        //那取消委托呢？
                        $($(ev.delegateTarget)).undelegate("click")
                    });
                  })
              // delegate 事件委托:事件委托的有点1.提高性能 2.后面追加的元素也带有相同的事件
             
              $(function(){
                    $('ul').delegate("li",'click',function(ev){
                        $(this).css('background','red')
                        //这里的this 只的是li,那怎么找到ul呢？
                        $(ev.delegateTarget).css('background','green')//这个可以找到委托人ul
                        //那取消委托呢？
                        $($(ev.delegateTarget)).undelegate("click")
                    });
                
                    $(".btn").on("click",function(){
                         $(".box ul").append("<li>追加进来的</li>")
                         console.log($(".box ul"))
                     })
                })

                