码迷,mamicode.com
首页 > 其他好文 > 详细

事件委托

时间:2017-08-01 19:28:03      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:事件处理   节点   this   html   添加   延长   rip   test   详解   

   1.时间委托的原因

    推荐看这个博客,写的非常具体 http://www.cnblogs.com/liugang-vip/p/5616484.html

  在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能。

  2.原理:

      利用事件冒泡原理,让父级代为处理程序,每次只执行一个dom节点事件,举例如下:

      

<button class=‘add‘>添加</button>
<
ul id=‘test‘> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> </ul>

$(function(){
   $(‘.add‘).on(‘click‘,function(){
   $("#test").append(‘<li>oooo</li>‘)
});
   $("#test").on(‘click‘,‘li‘,function(){
   console.log($(this).text());
})
})


 

 

 

事件委托

标签:事件处理   节点   this   html   添加   延长   rip   test   详解   

原文地址:http://www.cnblogs.com/wjylca/p/7269731.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!