转载

【JS实用技巧】利用冒泡机制，减少事件绑定，优化页面性能

引言

无论新手老手，在前端开发中，经常要为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 来获取冒泡阶段传播到此的具体列表项，我们就可以开心的去操作它啦。

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

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

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

谢谢你看到了最后，大家一起加油！

原文 https://segmentfault.com/a/1190000008349969

正文到此结束

所属分类：编程技术

本文标签： 代码 list API 实例突破 CSS DOM js UI 遍历希望 https jquery 解析 IO HTML http 网站时间开发教材需求参数 tar
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

【JS实用技巧】利用冒泡机制，减少事件绑定，优化页面性能

引言

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

实例

差劲的事件绑定：使用老掉牙的onclick属性

不错的事件绑定：获取元素集合并绑定事件

更好的事件绑定：利用冒泡机制监听父元素

注意点&细节解析：

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

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流