首页 > 代码库 > 事件委托

事件委托

2024-11-14 05:40:02   203人阅读

   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());
})
})



 


 




 
事件委托






























        

            
                
                  
                
                

                    联系

                    我们