手记

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 >我是由事件委托产生的新增元素</p>';
                        $target.parent().append(block);
                    }

                });

             });
4人推荐
随时随地看视频
慕课网APP