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

Jackwoo 发布于2019-08-20 14:17 / 3520人阅读

摘要：如何通过一些技巧，达到减少事件绑定，优化页面性能的目的呢接下来介绍一下我个人对优化事件绑定的实践。这里直接给出最佳实践利用事件冒泡机制来为元素绑定事件。再加上由于创建太多的事件监听，也会对页面性能有影响。

引言

无论新手老手，在前端开发中，经常要为DOM元素绑定事件，以实现某些功能。
如何通过一些JS技巧，达到减少事件绑定，优化页面性能的目的呢？
接下来介绍一下我个人对优化事件绑定的实践。

我尽量写得通俗易懂一些，希望能为刚入门前端的人们带来帮助。
也欢迎大家踊跃评论和指正，一起分享建议和想法哦。

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

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

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

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

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

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

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

实例

话不多说，直接上实例（下面的示例都不造轮子，直接用jquery了哈）。

假如现在有一个无序列表，需要在点击具体列表项时，于控制台打印该项的HTML内容。
思路是：想办法为DOM元素绑定事件 -> 获取元素HTML -> 输出到控制台。


    1
    2
    ...

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

...

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都同样指向的是列表项了，两个都可以用哦。

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

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

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

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

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

这里介绍的只是几个小点，在前端开发中能优化的地方还有很多很多。
重要的是精神层面上的东西，必须不满足于现状、多思考、多注重细节，才能逼着自己一点点向前爬过去。

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

GPU云服务器云服务器事件冒泡机制 js阻止冒泡事件 Lua性能优化技巧页面性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81517.html

JavaScript-面试

摘要：表示没有对象，即该处不应该有值。闭包的形成允许使用内部函数，可以将函数定义和函数表达式放在另一个函数的函数体内。使用闭包可以减少全局环境的污染，也可用延续变量的生命。所以在闭包不用之后，将不使用的局部变量删除，使其被回收。 1.javaScript的数据类型有什么 Undefined、Null、Boolean、Number、String 2.检测数据类型有什么方法 typeof typ...

fantix 2019-08-23 10:37 评论0 收藏0
javascript事件基础知识

摘要：可选，布尔值，指定事件是否在捕获或冒泡阶段执行，默认冒泡。适用范围参数介绍必须，字符串，事件名称。必须，指定事件触发时执行的函数。事件冒泡事件冒泡与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。什么是事件 javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件在浏览器中是以对象的形式存在的，即event，...

ad6623 2019-08-26 13:36 评论0 收藏0
关于JS中事件代理的解析

摘要：事件代理原理事件代理本质上来说是利用事件冒泡的机制来进行实现的。概述一般来说，我们在为前端页面设计交互的的时候往往需要为DOM元素添加事件处理程序。但是很多时候页面的DOM元素的结构和层级会很复杂，如果我们为所有需要添加事件处理的DOM元素一一绑定上事件处理程序，那么不仅编写出的代码会很繁杂，整个页面的性能也会很低下。比如我们有一个有序或者无序的列表，其中包裹了数百个子节点li，一...

KavenFan 2019-08-23 14:17 评论0 收藏0
深入React知识点整理（一）

摘要：以我自己的理解，函数式编程就是以函数为中心，将大段过程拆成一个个函数，组合嵌套使用。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大踏步地在业界投入实用。也许继面向对象编程之后，函数式编程会成为下一个编程的主流范式。使用React也满一年了，从刚刚会使用到逐渐探究其底层实现，以便学习几招奇技淫巧从而在自己的代码中使用，写出高效的代码。下面整理一些知识点，算是React看书...

Gilbertat 2019-08-22 11:18 评论0 收藏0
Javascript事件流

摘要：见下图更直观在事件流中，事件的目标在捕获阶段不会接受到事件，这意味着在捕获阶段，事件从到后就停止了。下一个阶段是目标阶段，于是事件在上发生，并在事件处理中被看成是冒泡阶段的一部分，然后，冒泡阶段发生，事件又传回。 CONTENTS DOM事件流事件冒泡阻止冒泡事件捕获事件委托 DOM事件流 1.什么是事件流？事件流所描述的是从页面中接受事件的顺序 2.DOM事件流的三个阶...

baiy 2019-08-22 18:48 评论0 收藏0