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

来源：互联网发布：淘宝刷流量软件安全吗编辑：程序博客网时间：2024/04/30 04:21

问题

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

//example  
$('#dom').click(function(e){  
  //do something  
});  
 
$('#dom2').click(function(e){  
  //do something  
});

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

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

<html> 
  <head> 
    <script type="text/javascript"> 
      $(function(){  
        $('#btn-add').click(function(){  
          $('.ul').prepend('<li><a href="javascript:;">text</a></li>');  
        });  
      });  
    </script> 
  </head> 
  <body> 
    <button id="btn-add">Create Element</button> 
    <ul class="ul"> 
      <li><a href="javascript:;">text</a></li> 
      <!-- 2000 line... --> 
      <li><a href="javascript:;">text</a></li> 
    </ul> 
  </body> 
</html>

Method 1

$(function(){  
    $('.ul a').click(function(e){  
        alert('click event');  
    });  
});

以下是Method 1的内存分析图

内存占用约3.4M

Method 2

$(function(){  
    $('.ul').on('click', 'a', function(e){  
        alert('click event');  
    });  
});

以下是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标签），能够有效的节省内存的损耗。

问题