【JS實(shí)用技巧】利用冒泡機(jī)制，減少事件綁定，優(yōu)化頁(yè)面性能

Jackwoo 發(fā)布于2019-08-20 14:17 / 3529人閱讀

摘要：如何通過(guò)一些技巧，達(dá)到減少事件綁定，優(yōu)化頁(yè)面性能的目的呢接下來(lái)介紹一下我個(gè)人對(duì)優(yōu)化事件綁定的實(shí)踐。這里直接給出最佳實(shí)踐利用事件冒泡機(jī)制來(lái)為元素綁定事件。再加上由于創(chuàng)建太多的事件監(jiān)聽(tīng)，也會(huì)對(duì)頁(yè)面性能有影響。

引言

無(wú)論新手老手，在前端開(kāi)發(fā)中，經(jīng)常要為DOM元素綁定事件，以實(shí)現(xiàn)某些功能。
如何通過(guò)一些JS技巧，達(dá)到減少事件綁定，優(yōu)化頁(yè)面性能的目的呢？
接下來(lái)介紹一下我個(gè)人對(duì)優(yōu)化事件綁定的實(shí)踐。

我盡量寫(xiě)得通俗易懂一些，希望能為剛?cè)腴T(mén)前端的人們帶來(lái)幫助。
也歡迎大家踴躍評(píng)論和指正，一起分享建議和想法哦。

事件綁定利器：利用事件冒泡機(jī)制

哈哈，放心，我不會(huì)強(qiáng)行地科普一堆瀏覽器事件機(jī)制晦澀的理論，

事件傳播機(jī)制在各種瀏覽器或版本上可能會(huì)有差異，在差異中尋找平衡點(diǎn)，冒泡機(jī)制是個(gè)突破口。

這里直接給出最佳實(shí)踐：利用事件冒泡機(jī)制來(lái)為DOM元素綁定事件。

理由一：早期IE只有冒泡機(jī)制，統(tǒng)一使用冒泡機(jī)制來(lái)綁定事件，就解決了最棘手的IE瀏覽器兼容性問(wèn)題了。

理由二：事件傳播的冒泡階段，最接近頁(yè)面UI上看到的實(shí)際情況，由子元素逐級(jí)向父元素傳播，更加直觀并且容易理解。

理由三：對(duì)于動(dòng)態(tài)添加的DOM元素，要直接為其綁定事件，只能推到元素創(chuàng)建后進(jìn)行。但如果利用事件冒泡機(jī)制，不需要再為這個(gè)時(shí)間點(diǎn)所糾結(jié)。

實(shí)例

話不多說(shuō)，直接上實(shí)例（下面的示例都不造輪子，直接用jquery了哈）。

假如現(xiàn)在有一個(gè)無(wú)序列表，需要在點(diǎn)擊具體列表項(xiàng)時(shí)，于控制臺(tái)打印該項(xiàng)的HTML內(nèi)容。
思路是：想辦法為DOM元素綁定事件 -> 獲取元素HTML -> 輸出到控制臺(tái)。


    1
    2
    ...

差勁的事件綁定：使用老掉牙的onclick屬性

...

function handler(e) {
    console.log($(e).html());
}

一不留神懶惰先生跑了出來(lái)：OK搞定，完成任務(wù)！就這樣吧，能實(shí)現(xiàn)功能就可以了。

思考：
這是種最古老的事件綁定方式，沒(méi)有做到JS和HTML的分離，非常不利于維護(hù)，是隨著潮流要被淘汰的糟糕做法。

可是不禁感嘆，如今還是會(huì)在某些中小型網(wǎng)站、教材、還有大學(xué)課堂上看到它們的身影。然后新手們紛紛模仿，從起點(diǎn)開(kāi)始就走了不少?gòu)澛罚乙彩沁^(guò)來(lái)人（捂臉）。

不錯(cuò)的事件綁定：獲取元素集合并綁定事件

$(".list-item").on("click", function() { // 獲取元素集合并綁定事件
    console.log($(this).html());
};

這次做到了JS和HTML的分離，先獲取元素集合，再利用jquery的事件綁定方法on()，解決瀏覽器事件API的差異問(wèn)題。

思考：
如果有100個(gè)列表項(xiàng)的話，jquery就會(huì)遍歷100次，為匹配的元素集合都綁定一個(gè)click事件。
光這100次遍歷和綁定操作，就是件非常消耗資源的事情。
再加上由于創(chuàng)建太多的事件監(jiān)聽(tīng)，也會(huì)對(duì)頁(yè)面性能有影響。

更好的事件綁定：利用冒泡機(jī)制監(jiān)聽(tīng)父元素

$(".list").on("click", "li", function(event) { // 綁定事件到父節(jié)點(diǎn)
    console.log($(event.target).html()); // 注意操作對(duì)象是event.target還是this，下面會(huì)有詳細(xì)說(shuō)明哦
});

優(yōu)化后，將監(jiān)聽(tīng)函數(shù)放到了父元素上，通過(guò)只監(jiān)聽(tīng)父元素的一個(gè)事件，掌控了千千萬(wàn)萬(wàn)的列表項(xiàng)。
借助冒泡機(jī)制，事件綁定由100優(yōu)化到1，就是這么愉快，哈哈哈。

注意點(diǎn)&細(xì)節(jié)解析：

使用on()方法的篩選器

這里用到了on()方法的第二個(gè)參數(shù)，這個(gè)參數(shù)是個(gè)篩選器，例如li，>li，.list-item，li.list-item等。
當(dāng)檢測(cè)到點(diǎn)擊事件是由這個(gè)篩選器匹配的元素傳來(lái)的，就觸發(fā)這個(gè)父節(jié)點(diǎn)的click事件回調(diào)函數(shù)。

篩選器沒(méi)有用.list-item而是li

因?yàn)槿绻裞ss類(lèi)作為篩選器的話，jquery在執(zhí)行時(shí)要把每個(gè)event.target的class屬性去查一查，然后拆分后看看是不是有叫list-item。判斷步奏多了很多。
本示例中，只使用li來(lái)篩選就已經(jīng)滿(mǎn)足我們的需求了，優(yōu)化要從細(xì)節(jié)開(kāi)始哦。

注意回調(diào)函數(shù)中操作的是this還是event.target

因?yàn)楫?dāng)前是在父元素中綁定的事件，所以this默認(rèn)指向的是父元素，并不是我們的列表項(xiàng)。

但是這里要強(qiáng)調(diào)一點(diǎn)：如果使用on()方法中的篩選器自動(dòng)篩選的話，jquery也會(huì)自動(dòng)幫我們把this指向改成event.target，這時(shí)候this和event.target都同樣指向的是列表項(xiàng)了，兩個(gè)都可以用哦。

建議使用event.target，避免混淆，也可以讓代碼更加清晰啦。

如果不使用jquery在on()方法中提供的篩選器的話，也可以自己去判斷冒泡過(guò)來(lái)的是不是li：

$(".list").on("click", function(event) {
    if (event.target.tagName === "LI") { // 判斷標(biāo)簽是不是li，注意tagName屬性返回的是大寫(xiě)
        console.log($(event.target).html());
    }
});

這樣子無(wú)論是用on()方法的自動(dòng)篩選，還是直接自己寫(xiě)代碼判斷，都可以統(tǒng)一使用event.target來(lái)獲取冒泡階段傳播到此的具體列表項(xiàng)，我們就可以開(kāi)心的去操作它啦。

結(jié)語(yǔ)：一切重在不滿(mǎn)足于現(xiàn)狀的精神

這里介紹的只是幾個(gè)小點(diǎn)，在前端開(kāi)發(fā)中能優(yōu)化的地方還有很多很多。
重要的是精神層面上的東西，必須不滿(mǎn)足于現(xiàn)狀、多思考、多注重細(xì)節(jié)，才能逼著自己一點(diǎn)點(diǎn)向前爬過(guò)去。

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