引言

无论新手老手,在前端开发中,经常要为DOM元素绑定事件,以实现某些功能。

如何通过一些JS技巧,达到减少事件绑定,优化页面性能的目的呢?

接下来介绍一下我个人对优化事件绑定的实践。

我尽量写得通俗易懂一些,希望能为刚入门前端的人们带来帮助。

也欢迎大家踊跃评论和指正,一起分享建议和想法哦。

事件绑定利器:利用事件冒泡机制

哈哈,放心,我不会强行地科普一堆浏览器事件机制晦涩的理论,

事件传播机制在各种浏览器或版本上可能会有差异,在差异中寻找平衡点,冒泡机制是个突破口。

这里直接给出 最佳实践:利用事件冒泡机制来为DOM元素绑定事件 。

理由一:早期IE只有冒泡机制,统一使用冒泡机制来绑定事件,就解决了最棘手的IE浏览器兼容性问题了。

理由二:事件传播的冒泡阶段,最接近页面UI上看到的实际情况,由子元素逐级向父元素传播,更加直观并且容易理解。

理由三:对于动态添加的DOM元素,要直接为其绑定事件,只能推到元素创建后进行。但如果利用事件冒泡机制,不需要再为这个时间点所纠结。

实例

话不多说,直接上实例(下面的示例都不造轮子,直接用jquery了哈)。

假如现在有一个无序列表,需要在点击具体列表项时,于控制台打印该项的HTML内容。

思路是:想办法为DOM元素绑定事件 -> 获取元素HTML -> 输出到控制台。

<ul class="list"> <li class="list-item">1</li> <li class="list-item">2</li> ... </ul> 差劲的事件绑定:使用老掉牙的onclick属性 <ul class="list"> <li class="list-item" onclick="handler(this)"></li> <li class="list-item" onclick="handler(this)"></li> ... </ul> function handler(e) { console.log($(e).html()); }

一不留神懒惰先生跑了出来:OK搞定,完成任务!就这样吧,能实现功能就可以了。

思考:

这是种最古老的事件绑定方式,没有做到JS和HTML的分离,非常不利于维护,是随着潮流要被淘汰的糟糕做法。

可是不禁感叹,如今还是会在某些中小型网站、教材、还有大学课堂上看到它们的身影。然后新手们纷纷模仿,从起点开始就走了不少弯路,我也是过来人(捂脸)。

不错的事件绑定:获取元素集合并绑定事件 $('.list-item').on('click', function() { // 获取元素集合并绑定事件 console.log($(this).html()); };

这次做到了JS和HTML的分离,先获取元素集合,再利用 jquery 的事件绑定方法 on() ,解决浏览器事件API的差异问题。

思考:

如果有100个列表项的话, jquery 就会遍历100次,为匹配的元素集合都绑定一个 click 事件。

光这100次遍历和绑定操作,就是件非常消耗资源的事情。

再加上由于创建太多的事件监听,也会对页面性能有影响。

更好的事件绑定:利用冒泡机制监听父元素 $('.list').on('click', 'li', function(event) { // 绑定事件到父节点 console.log($(event.target).html()); // 注意操作对象是event.target还是this,下面会有详细说明哦 });

优化后,将监听函数放到了父元素上,通过只监听父元素的一个事件,掌控了千千万万的列表项。

借助冒泡机制,事件绑定由100优化到1,就是这么愉快,哈哈哈。

注意点&细节解析:

使用 on() 方法的筛选器

这里用到了 on() 方法的第二个参数,这个参数是个筛选器,例如 li , >li , .list-item , li.list-item 等。

当检测到点击事件是由这个筛选器匹配的元素传来的,就触发这个父节点的click事件回调函数。

筛选器没有用 .list-item 而是 li

因为如果把css类作为筛选器的话, jquery 在执行时要把每个 event.target 的 class 属性去查一查,然后拆分后看看是不是有叫 list-item 。判断步奏多了很多。

本示例中,只使用 li 来筛选就已经满足我们的需求了,优化要从细节开始哦。

注意回调函数中操作的是 this 还是 event.target

因为当前是在父元素中绑定的事件,所以 this 默认指向的是父元素,并不是我们的列表项。

但是这里要强调一点:如果使用 on() 方法中的筛选器自动筛选的话, jquery 也会自动帮我们把 this 指向改成 event.target ,这时候 this 和 event.target 都同样指向的是列表项了,两个都可以用哦。

如果不使用 jquery 在 on() 方法中提供的筛选器的话,也可以自己去判断冒泡过来的是不是li:

$('.list').on('click', function(event) { if (event.target.tagName === 'LI') { // 判断标签是不是li,注意tagName属性返回的是大写 console.log($(event.target).html()); } });

建议使用 event.target ,避免混淆,也可以让代码更加清晰啦。

这样子无论是用 on() 方法的自动筛选,还是直接自己写代码判断,都可以统一使用 event.target 来获取冒泡阶段传播到此的具体列表项,我们就可以开心的去操作它啦。

结语:一切重在不满足于现状的精神

这里介绍的只是几个小点,在前端开发中能优化的地方还有很多很多。

重要的是精神层面上的东西,必须不满足于现状、多思考、多注重细节,才能逼着自己一点点向前爬过去。

谢谢你看到了最后,大家一起加油!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTML浏览器前端开发需求
tags: li,绑定,gt,list,事件,event,lt,冒泡,target,元素,class,筛选
分页:12
转载请注明
本文标题:【JS实用技巧】利用冒泡机制,减少事件绑定,优化页面性能
本站链接:http://www.codesec.net/view/533878.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(52)