成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Jackwoo / 3527人閱讀

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

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

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

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

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

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

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

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

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

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

實(shí)例

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

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

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

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

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

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

可是不禁感嘆，如今還是會在某些中小型網(wǎng)站、教材、還有大學(xué)課堂上看到它們的身影。然后新手們紛紛模仿，從起點(diǎn)開始就走了不少彎路，我也是過來人（捂臉）。

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

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

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

更好的事件綁定：利用冒泡機(jī)制監(jiān)聽父元素 
$(".list").on("click", "li", function(event) { // 綁定事件到父節(jié)點(diǎn)
    console.log($(event.target).html()); // 注意操作對象是event.target還是this，下面會有詳細(xì)說明哦
});

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

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

使用on()方法的篩選器

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

篩選器沒有用.list-item而是li

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

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

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

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

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81517.html

相關(guān)文章

  • JavaScript-面試

    摘要：表示沒有對象，即該處不應(yīng)該有值。閉包的形成允許使用內(nèi)部函數(shù)，可以將函數(shù)定義和函數(shù)表達(dá)式放在另一個函數(shù)的函數(shù)體內(nèi)。使用閉包可以減少全局環(huán)境的污染，也可用延續(xù)變量的生命。所以在閉包不用之后，將不使用的局部變量刪除，使其被回收。 1.javaScript的數(shù)據(jù)類型有什么 Undefined、Null、Boolean、Number、String 2.檢測數(shù)據(jù)類型有什么方法 typeof typ...

    fantix 評論0 收藏0

  • javascript事件基礎(chǔ)知識

    摘要：可選，布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行，默認(rèn)冒泡。適用范圍參數(shù)介紹必須，字符串，事件名稱。必須，指定事件觸發(fā)時執(zhí)行的函數(shù)。事件冒泡事件冒泡與事件捕獲恰恰相反，事件冒泡順序是由內(nèi)到外進(jìn)行事件傳播，直到根節(jié)點(diǎn)。 什么是事件 javascript與HTML之間交互就是通過事件實(shí)現(xiàn)的，事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。事件在瀏覽器中是以對象的形式存在的，即event，...

    ad6623 評論0 收藏0

  • 關(guān)于JS中事件代理的解析

    摘要：事件代理原理事件代理本質(zhì)上來說是利用事件冒泡的機(jī)制來進(jìn)行實(shí)現(xiàn)的。 概述 一般來說，我們在為前端頁面設(shè)計交互的的時候往往需要為DOM元素添加事件處理程序。但是很多時候頁面的DOM元素的結(jié)構(gòu)和層級會很復(fù)雜，如果我們?yōu)樗行枰砑邮录幚淼腄OM元素一一綁定上事件處理程序，那么不僅編寫出的代碼會很繁雜，整個頁面的性能也會很低下。比如我們有一個有序或者無序的列表，其中包裹了數(shù)百個子節(jié)點(diǎn)li，一...

    KavenFan 評論0 收藏0

  • 深入React知識點(diǎn)整理（一）

    摘要：以我自己的理解，函數(shù)式編程就是以函數(shù)為中心，將大段過程拆成一個個函數(shù)，組合嵌套使用。越來越多的跡象表明，函數(shù)式編程已經(jīng)不再是學(xué)術(shù)界的最愛，開始大踏步地在業(yè)界投入實(shí)用。也許繼面向?qū)ο缶幊讨?，函?shù)式編程會成為下一個編程的主流范式。 使用React也滿一年了，從剛剛會使用到逐漸探究其底層實(shí)現(xiàn)，以便學(xué)習(xí)幾招奇技淫巧從而在自己的代碼中使用，寫出高效的代碼。下面整理一些知識點(diǎn)，算是React看書...

    Gilbertat 評論0 收藏0

  • Javascript事件流

    摘要：見下圖更直觀在事件流中，事件的目標(biāo)在捕獲階段不會接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個階段是目標(biāo)階段，于是事件在上發(fā)生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流？ 事件流所描述的是從頁面中接受事件的順序 2.DOM事件流的三個階...

    baiy 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<