jQuery的事件绑定

首先我们看下面的一个很常见的事件绑定代码//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 HTMLhtml head script typetext/javascript $(function(){ $(#btn-add).click(function(){ $(.ul).prepend(lia hrefjavascript:;text/a/li); }); }); /script /head body button idbtn-addCreate Element/button ul classul lia hrefjavascript:;text/a/li !-- 2000 line... -- lia hrefjavascript:;text/a/li /ul /body /htmlMethod 1$(function(){ $(.ul a).click(function(e){ alert(click event); }); });以下是Method 1的内存分析图内存占用约3.4MMethod 2$(function(){ $(.ul).on(click, a, function(e){ alert(click event); }); });以下是Method 2的内存分析图内存占用约2.0M结论Method 1 明显比 Method 2 多耗1.4M的内存Method 1 无法将事件绑定到通过点击button所新增DOM中来而Method 2可以。只要on的delegate对象是HTML页面原有的元素由于是事件的触发是通过Javascript的事件冒泡机制来监测所以对于所有子元素包括后期通过JS生成的元素所有的事件监测均能有效且由于不用对多个元素进行事件绑定在这个example中为2000a标签能够有效的节省内存的损耗。思考代码如诗但很容易变成代码如屎。如何提高代码的优雅程度也是一个很有意思的事情。以下是一个很普通且普遍的JS文件的代码片段用于一般网站$(#btn-add).click(function(){ //do something }); $(.action-box #btn-delete).click(function(){ //do something }); $(.action-box #btn-sort).mouseenter(function(){ //do something }); /** **more same code */毫不夸张的说当一个js文件上百行后类似于上面的代码你很难从里面发现规律。可能A喜欢写#btn-add而B喜欢写.action-box #btn-add来作为选择符。堆砌着许多不同类型事件没有一个次序可言没有运用到我们刚刚所讲的利用事件冒泡来做事件绑定改进我们来一步步改进一下之前的JS代码Version 1$(.action-box).on(click, #btn-add, function(){ //do something }); $(.action-box).on(click, #btn-delete, function(){ //do something });虽然运用了事件冒泡不过感觉还是有点累赘.action-box出现多次感觉不舒服让我们继续改进Version 2$(.action-box).on(click, #btn-add #btn-delete, function(){ if($(this).attr(id) btn-add){ //do something } else{ //do something } });感觉比刚刚好多了不过还是需要判断元素来做出相应的处理能接受但不完美。灵感首先看一下css的增强版本sass对于css语法上面的改进/*bed css code*/ .action-box { width: 100%; color: #000; } #btn-add { color: blue; } #btn-delete { color: red; } /*good css code*/ .action-box { width: 100%; color: #000; } .action-box #btn-add { color: blue; } .action-box #btn-delete { color: red; } /*sass code*/ .action-box { width: 100%; color: #000; #btn-add { color: blue; } #btn-delete { color: red;