关于jQuery事件绑定的一些思考(补充)

首先，我们来看看下面非常常见的事件绑定代码：复制代码如下：//example $ ('# DOM ')。点击(函数(e){//做某事})；$('#dom2 ')。点击(函数(e){//做某事})；这段代码在事件绑定处理上有一些缺陷：事件绑定太多会浪费内存，后期生成HTML没有事件绑定，需要重新绑定。语法太复杂了。对于第1点和第2点的解决方案，首先要了解jQuery的事件绑定。jQuery的事件绑定中可以调用很多方法。以Click事件为例：click method bind method delegate method on method无论使用哪种方法(click/bind/delegate)，最终都是jQuery，底层调用on method完成最终的事件绑定。所以从某个角度来说，除了选择写作的便利性和习惯性之外，还不如直接用on方法来快乐直接。方法的详细解释和用例，请直接访问jQuery官网，这里不做解释。Api.jquery.com表现首先，我们需要清楚地了解不同事件绑定方法之间的记忆占用差距。Chrome的开发工具将用于性能分析。配置文件-获取堆快照。有了这个工具，我们可以看到Javascript占用的内存，分析性能问题。

DEMO HTML复制代码的代码如下： HTML head script Type=' text/JavaScript ' $(function(){ $(' # BTN-Add ')。单击(function () {$(')。ul’)。prepend(' lia href=' JavaScript 3360；text/a/Li ')；});});/script /head body按钮id=' BTN-add ' create Element/button ul class=' ul ' lia href=' JavaScript :正文/a/li！- 2000线.-lia href=' JavaScript :Text/a/li /ul /body /html方法1复制代码如下： $ (function () {$(')。ul a ')。click(函数(e){ alert(' click event ')；});});下面是方法1的内存分析图。内存消耗约340万。

方法2的复制代码如下： $ (function () {$(')。ul’)。on ('click '，' a '，function(e){ alert(' click event ')；});});下面是方法2的内存分析图。内存占用约2.0m 。

结论方法1明显比方法2多消耗140万内存。方法1不能通过单击按钮将事件绑定到新的DOM，但是方法2可以。只要on的委托对象是HTML页面的原始元素，由于事件的触发是通过Javascript的事件冒泡机制进行监控的，所以所有的事件监控对于所有的子元素(包括后来JS生成的子元素)都是可以有效的，而且由于不需要将事件绑定到多个元素(本例中是2000 a标签)，所以可以有效的节省内存损失。思考代码就像诗歌，但很容易变成狗屎一样的代码。如何提高代码的优雅度也是一件非常有趣的事情。下面是一个非常常见的JS文件的代码片段(用于一般网站)。副本代码如下： $ ('# BTN-add ')。点击(function(){//做某事})；$('.操作框#btn-delete ')。点击(function(){//做某事})；$('.操作框# BTN-sort’)。mouseenter(function(){ //do某物})；/* * * *更多相同的代码*/毫不夸张地说，当一个js文件有几百行时，你很难从上面的代码中找到规则。1.也许a喜欢写#btn-add，而b喜欢写。操作框# BTN-添加为选择器。2.有许多不同类型的事件堆积在一起，根本没有顺序。3.我们没有像我们刚才谈到的那样通过使用事件冒泡来应用事件绑定。

改进让我们对之前的JS代码进行改进版本1一步一步复制代码如下： $(')。操作框')。on ('click '，' # BTN-add '，function () {//do某物})；$('.操作框')。on('click '，' #btn-delete '，function(){ //do某物})；虽然使用了事件冒泡，但是感觉还是有点累赘。那个。动作框出现很多次，让我们感觉不舒服。让我们继续改进版本2副本代码如下： $('。操作框')。On ('click '，' # BTN-add，#btn-delete '，function(){ if($(this))。attr(' id ')==' BTN-add '){//做点什么}其他的{//做点什么} })；感觉比以前好多了，但还是需要对要素进行相应的判断处理，可以接受但不完美。首先，看看css sass的增强版本，它改进了css语法。复制的代码如下：/* bedcsscode */。动作框{宽度： 100%；color: # 000} # BTN-添加{ color: blue} # BTN-delete { color : red；}/*好的css代码*/。动作框{ width : 100%；color: # 000} .操作框# BTN-添加{ color: blue} .操作框# BTN-删除{ color: red}/*sass代码*/。动作框{ width : 100%；color: # 000# BTN-添加{ color: blue} # BTN-delete { color : red；}}我们可以清楚地看到好的css代码和sass代码中的文档结构：下面有两个按钮。动作盒。这能允许在js中使用sass吗？当然，答案是肯定的。复制代码如下： $('。操作框')。coffee({ click : { ' # BTN-add ' : function(){//做某事}，//这是' # BTN-delete ' 3360 function(){//做某事}}，mouse enter 3360 { ' # BTN-sort ' : function()。你喜欢这种结构吗？1.清除文档结构2。利用事件冒泡有效减少内存占用3。第一个级别由事件名称4划分。第二层的属性名相当于选择器。coffee函数的源代码如下： $ . fn . coffee=function(obj){ for(obj中的var enabler)for(obj[ename]中的var selector)$(this)。on (ename，selector，obj[ename][selector])；}讲几行代码，就能做出一个绝妙的语法糖果尽情享受吧！_作者：CoffeeDeveloper。