阅读306 返回首页    go 阿里云 go 技术社区[云栖]

对jQuery的事件绑定的一些思考

问题

首先我们看下面的一个很常见的事件绑定代码：



    

  1. //example  
    2. 

  2. 
$('#dom').click(function(e){  

    3. 

  3. 
  //do something  

    4. 

  4. });  
    5. 

  5.  
    6. 

  6. 
$('#dom2').click(function(e){  

    7. 

  7. 
  //do something  

    8. 

  8. }); 
    9. 




这段代码在事件绑定处理上有一些缺陷：



1.过多的事件绑定会损耗内存



2.后期生成HTML会没有事件绑定，需要重新绑定



3.语法过于繁杂



解决方案



对于1、2两点的解决方案，我们首先先了解一下jQuery的事件绑定



jQuery的事件绑定有多个方法可以调用，以click事件来举例：



·click方法



·bind方法



·delegate方法



·on方法



不管你用的是（click / bind / delegate)之中那个方法，最终都是jQuery底层都是调用on方法来完成最终的事件绑定。因此从某种角度来讲除了在书写的方便程度及习惯上挑选，不如直接都采用on方法来的痛快和直接。



关于对方法的详细解释和用例，请直接访问jQuery官网，在这里不一一说明。api.jquery.com



性能



首先我们需要先对不同的事件绑定方式之间的内存占用差距有一个清晰的认识。



对于性能的分析将采用Chrome的Developer Tools。



Profiles --> Take Heap Snapshot，用这个工具我们可以看到Javascript所占用的内存，能够对性能问题进行分析。







DEMO HTML




    

  1. <html> 
    2. 

  2. 
  <head> 

    3. 

  3. 
    <script type="text/javascript"> 

    4. 

  4.       $(function(){  
    5. 

  5.         $('#btn-add').click(function(){  
    6. 

  6. 
          $('.ul').prepend('<li><a href="javascript:;">text</a></li>');  

    7. 

  7.         });  
    8. 

  8.       });  
    9. 

  9. 
    </script> 

    10. 

  10. 
  </head> 

    11. 

  11. 
  <body> 

    12. 

  12. 
    <button id="btn-add">Create Element</button> 

    13. 

  13. 
    <ul class="ul"> 

    14. 

  14. 
      <li><a href="javascript:;">text</a></li> 

    15. 

  15. 
      <!-- 2000 line... --> 

    16. 

  16. 
      <li><a href="javascript:;">text</a></li> 

    17. 

  17. 
    </ul> 

    18. 

  18. 
  </body> 

    19. 

  19. 
</html> 

    20. 




Method 1




    

  1. $(function(){  
    2. 

  2.     $('.ul a').click(function(e){  
    3. 

  3.         alert('click event');  
    4. 

  4.     });  
    5. 

  5. }); 
    6. 




以下是Method 1的内存分析图



内存占用约3.4M







Method 2




    

  1. $(function(){  
    2. 

  2. 
    $('.ul').on('click', 'a', function(e){  

    3. 

  3. 
        alert('click event');  

    4. 

  4.     });  
    5. 

  5. }); 
    6. 




以下是Method 2的内存分析图



内存占用约2.0M







结论



1.Method 1 明显比 Method 2 多耗1.4M的内存



2.Method 1 无法将事件绑定到通过点击button所新增DOM中来，而Method 2可以。



只要on的delegate对象是HTML页面原有的元素，由于是事件的触发是通过Javascript的事件冒泡机制来监测，所以对于所有子元素（包括后期通过JS生成的元素）所有的事件监测均能有效，且由于不用对多个元素进行事件绑定（在这个example中为2000+a标签），能够有效的节省内存的损耗。







问题



首先我们看下面的一个很常见的事件绑定代码：




    

  1. //example  
    2. 

  2. 
$('#dom').click(function(e){  

    3. 

  3. 
  //do something  

    4. 

  4. });  
    5. 

  5.  
    6. 

  6. 
$('#dom2').click(function(e){  

    7. 

  7. 
  //do something  

    8. 

  8. }); 
    9. 




这段代码在事件绑定处理上有一些缺陷：



1.过多的事件绑定会损耗内存



2.后期生成HTML会没有事件绑定，需要重新绑定



3.语法过于繁杂



解决方案



对于1、2两点的解决方案，我们首先先了解一下jQuery的事件绑定



jQuery的事件绑定有多个方法可以调用，以click事件来举例：



·click方法



·bind方法



·delegate方法



·on方法



不管你用的是（click / bind / delegate)之中那个方法，最终都是jQuery底层都是调用on方法来完成最终的事件绑定。因此从某种角度来讲除了在书写的方便程度及习惯上挑选，不如直接都采用on方法来的痛快和直接。



关于对方法的详细解释和用例，请直接访问jQuery官网，在这里不一一说明。api.jquery.com



性能



首先我们需要先对不同的事件绑定方式之间的内存占用差距有一个清晰的认识。



对于性能的分析将采用Chrome的Developer Tools。



Profiles --> Take Heap Snapshot，用这个工具我们可以看到Javascript所占用的内存，能够对性能问题进行分析。







DEMO HTML




    

  1. <html> 
    2. 

  2. 
  <head> 

    3. 

  3. 
    <script type="text/javascript"> 

    4. 

  4.       $(function(){  
    5. 

  5.         $('#btn-add').click(function(){  
    6. 

  6. 
          $('.ul').prepend('<li><a href="javascript:;">text</a></li>');  

    7. 

  7.         });  
    8. 

  8.       });  
    9. 

  9. 
    </script> 

    10. 

  10. 
  </head> 

    11. 

  11. 
  <body> 

    12. 

  12. 
    <button id="btn-add">Create Element</button> 

    13. 

  13. 
    <ul class="ul"> 

    14. 

  14. 
      <li><a href="javascript:;">text</a></li> 

    15. 

  15. 
      <!-- 2000 line... --> 

    16. 

  16. 
      <li><a href="javascript:;">text</a></li> 

    17. 

  17. 
    </ul> 

    18. 

  18. 
  </body> 

    19. 

  19. 
</html> 

    20. 




Method 1




    

  1. $(function(){  
    2. 

  2.     $('.ul a').click(function(e){  
    3. 

  3.         alert('click event');  
    4. 

  4.     });  
    5. 

  5. }); 
    6. 




以下是Method 1的内存分析图



内存占用约3.4M







Method 2




    

  1. $(function(){  
    2. 

  2. 
    $('.ul').on('click', 'a', function(e){  

    3. 

  3. 
        alert('click event');  

    4. 

  4.     });  
    5. 

  5. }); 
    6. 




以下是Method 2的内存分析图



内存占用约2.0M







结论



1.Method 1 明显比 Method 2 多耗1.4M的内存



2.Method 1 无法将事件绑定到通过点击button所新增DOM中来，而Method 2可以。



只要on的delegate对象是HTML页面原有的元素，由于是事件的触发是通过Javascript的事件冒泡机制来监测，所以对于所有子元素（包括后期通过JS生成的元素）所有的事件监测均能有效，且由于不用对多个元素进行事件绑定（在这个example中为2000+a标签），能够有效的节省内存的损耗。




最后更新：2017-04-03 20:43:08
  上一篇：go 京东 vs 苏宁：两个穷人的流血战争
  下一篇：go 雷军VS黄章：现实主义和梦幻主义的商业对决