【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
来获取冒泡阶段传播到此的具体列表项，我们就可以开心的去操作它啦。
结语：一切重在不满足于现状的精神
这里介绍的只是几个小点，在前端开发中能优化的地方还有很多很多。
重要的是精神层面上的东西，必须不满足于现状、多思考、多注重细节，才能逼着自己一点点向前爬过去。
谢谢你看到了最后，大家一起加油！
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
