【JS实用技巧】应用冒泡机制，削减事宜绑定，优化页面机能

2024年3月2日 232次阅读 来源: 小神游

弁言

不管新手熟手，在前端开辟中，常常要为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来猎取冒泡阶段流传到此的细致列表项，我们就能够高兴的去操纵它啦。

结语：统统重在不满足于近况的精力

这里引见的只是几个小点，在前端开辟中能优化的处所另有许多许多。
主要的是精力层面上的东西，必需不满足于近况、多思索、多注意细节，才逼着本身一点点向前爬过去。

谢谢你看到了末了，人人一同加油！

    原文作者：小神游
    原文地址: https://segmentfault.com/a/1190000008349969
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞