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

问题

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


  1. //example  
  2. $('#dom').click(function(e){  
  3.   //do something  
  4. });  
  5.  
  6. $('#dom2').click(function(e){  
  7.   //do something  
  8. }); 

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

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.   <head> 
  3.     <script type="text/javascript"> 
  4.       $(function(){  
  5.         $('#btn-add').click(function(){  
  6.           $('.ul').prepend('<li><a href="javascript:;">text</a></li>');  
  7.         });  
  8.       });  
  9.     </script> 
  10.   </head> 
  11.   <body> 
  12.     <button id="btn-add">Create Element</button> 
  13.     <ul class="ul"> 
  14.       <li><a href="javascript:;">text</a></li> 
  15.       <!-- 2000 line... --> 
  16.       <li><a href="javascript:;">text</a></li> 
  17.     </ul> 
  18.   </body> 
  19. </html> 

Method 1


  1. $(function(){  
  2.     $('.ul a').click(function(e){  
  3.         alert('click event');  
  4.     });  
  5. }); 

以下是Method 1的内存分析图

内存占用约3.4M

Method 2


  1. $(function(){  
  2.     $('.ul').on('click', 'a', function(e){  
  3.         alert('click event');  
  4.     });  
  5. }); 

以下是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. $('#dom').click(function(e){  
  3.   //do something  
  4. });  
  5.  
  6. $('#dom2').click(function(e){  
  7.   //do something  
  8. }); 

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

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.   <head> 
  3.     <script type="text/javascript"> 
  4.       $(function(){  
  5.         $('#btn-add').click(function(){  
  6.           $('.ul').prepend('<li><a href="javascript:;">text</a></li>');  
  7.         });  
  8.       });  
  9.     </script> 
  10.   </head> 
  11.   <body> 
  12.     <button id="btn-add">Create Element</button> 
  13.     <ul class="ul"> 
  14.       <li><a href="javascript:;">text</a></li> 
  15.       <!-- 2000 line... --> 
  16.       <li><a href="javascript:;">text</a></li> 
  17.     </ul> 
  18.   </body> 
  19. </html> 

Method 1


  1. $(function(){  
  2.     $('.ul a').click(function(e){  
  3.         alert('click event');  
  4.     });  
  5. }); 

以下是Method 1的内存分析图

内存占用约3.4M

Method 2


  1. $(function(){  
  2.     $('.ul').on('click', 'a', function(e){  
  3.         alert('click event');  
  4.     });  
  5. }); 

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

时间: 2024-11-13 08:22:15

对jQuery的事件绑定的一些思考的相关文章

对jQuery的事件绑定的一些思考(补充)_jquery

首先我们看下面的一个很常见的事件绑定代码: 复制代码 代码如下: //example $('#dom').click(function(e){ //do something }); $('#dom2').click(function(e){ //do something }); 这段代码在事件绑定处理上有一些缺陷: 过多的事件绑定会损耗内存 后期生成HTML会没有事件绑定,需要重新绑定 语法过于繁杂 解决方案 对于1.2两点的解决方案,我们首先先了解一下jQuery的事件绑定 jQuery的事件

jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTEN

jQuery 文本框事件绑定与取消代码

jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind: 区别:(个人理解)bind是一次绑定事件到每一个子节点:on是只绑定到父节点,然后冒泡到各个子节点: 用法:bind  代码如下 复制代码 一个事件,一个方法:$(".class input").bind('click',function(e){...;e.stopPropagation;}) 两个事件,一个方法:$(".class input").bind('click

jQuery新的事件绑定机制on()示例应用_jquery

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

Jquery on方法绑定事件后执行多次的实现方法_jquery

这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

jQuery事件绑定用法详解(附bind和live的区别)_jquery

本文实例分析了jQuery事件绑定用法.分享给大家供大家参考,具体如下: html: <a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> <button cl

关于jquery input textare 事件绑定及用法学习_jquery

(1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind: 区别:(个人理解)bind是一次绑定事件到每一个子节点:on是只绑定到父节点,然后冒泡到各个子节点: 用法:bind 一个事件,一个方法:$(".class input").bind('click',function(e){...;e.stopPropagation;}) 两个事件,一个方法:$(".class input").bind('click mouseov

jQuery文本框(input textare)事件绑定方法教程_jquery

目前1.7以上,jquery​的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind: 区别:(个人理解)bind是一次绑定事件到每一个子节点:on是只绑定到父节点,然后冒泡到各个子节点: 用法:bind 一个事件,一个方法:$(".class input").bind('click',function(e)

jQuery事件绑定on()与弹窗的例子

页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery的事件绑定on()方法实现. 如图,弹窗是js动态生成的,通过点击某个链接弹出,弹窗中的"立即去使用"链接点击后,实现的效果是关闭弹窗,并跳转到锚点. 这个a标签是: XHTML <a style="display:" title="立即去使用" target="_blank" gid=&q