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

建议使用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来获取冒泡阶段传播到此的具体列表项，咱们就能够开心的去操做它啦。

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

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

谢谢你看到了最后，你们一块儿加油！