jQuery代码优化:事件委托篇

1.概念：事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。
例如：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
2.原理：事件冒泡机制；
3.区别：.bind()：只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素
delegate()绑定事件解决“事件传播链”过长的问题（类似于新来的员工收不到快递）。
ps:在下列情况下，应该使用.live()或.delegate()，而不能使用.bind()：
为DOM中的很多元素绑定相同事件；
为DOM中尚不存在的元素绑定事件；
4.特点：优化性能，减少代码冗余；

<ul><!--ul事件委托的执行者-->
      <li>1.为DOM中的很多元素绑定相同事件</li>
           <li>发出事件委托的人</li>
           <li>利用冒泡原理触发事件</li>
           <li>我是事件委托的幕后者</li>
</ul>

 $(document).ready(function(){
                var parentNode = $('ul');               
                parentNode.on('click',function(e){                  
                    var target = e.target;
                    var $target = $(target);
//                  $target.parent().find('p').remove();
//找到需要操作的元素
                    if($target.is('li')){       

                        var block = '<p style="color:red">我是由事件委托产生的新增元素</p>';
                        $target.parent().append(block);
                    }

                });

             });