当前位置:Gxlcms > JavaScript > 对jQuery的事件绑定的一些思考(补充)_jquery

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

时间:2021-07-01 10:21:17 帮助过:3人阅读

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

代码如下:

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

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


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

过多的事件绑定会损耗内存
后期生成HTML会没有事件绑定,需要重新绑定
语法过于繁杂

解决方案

对于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

代码如下: