国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【JS實用技巧】利用冒泡機制，減少事件綁定，優化頁面性能

Jackwoo / 3522人閱讀

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

引言 
無論新手老手，在前端開發中，經常要為DOM元素綁定事件，以實現某些功能。
如何通過一些JS技巧，達到減少事件綁定，優化頁面性能的目的呢？
接下來介紹一下我個人對優化事件綁定的實踐。

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

事件綁定利器：利用事件冒泡機制

哈哈，放心，我不會強行地科普一堆瀏覽器事件機制晦澀的理論，

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

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

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

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

理由三：對于動態添加的DOM元素，要直接為其綁定事件，只能推到元素創建后進行。但如果利用事件冒泡機制，不需要再為這個時間點所糾結。

實例

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

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

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

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來獲取冒泡階段傳播到此的具體列表項，我們就可以開心的去操作它啦。

結語：一切重在不滿足于現狀的精神

這里介紹的只是幾個小點，在前端開發中能優化的地方還有很多很多。
重要的是精神層面上的東西，必須不滿足于現狀、多思考、多注重細節，才能逼著自己一點點向前爬過去。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81517.html

相關文章

  • JavaScript-面試

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

    fantix 評論0 收藏0

  • javascript事件基礎知識

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

    ad6623 評論0 收藏0

  • 關于JS中事件代理的解析

    摘要：事件代理原理事件代理本質上來說是利用事件冒泡的機制來進行實現的。 概述 一般來說，我們在為前端頁面設計交互的的時候往往需要為DOM元素添加事件處理程序。但是很多時候頁面的DOM元素的結構和層級會很復雜，如果我們為所有需要添加事件處理的DOM元素一一綁定上事件處理程序，那么不僅編寫出的代碼會很繁雜，整個頁面的性能也會很低下。比如我們有一個有序或者無序的列表，其中包裹了數百個子節點li，一...

    KavenFan 評論0 收藏0

  • 深入React知識點整理（一）

    摘要：以我自己的理解，函數式編程就是以函數為中心，將大段過程拆成一個個函數，組合嵌套使用。越來越多的跡象表明，函數式編程已經不再是學術界的最愛，開始大踏步地在業界投入實用。也許繼面向對象編程之后，函數式編程會成為下一個編程的主流范式。 使用React也滿一年了，從剛剛會使用到逐漸探究其底層實現，以便學習幾招奇技淫巧從而在自己的代碼中使用，寫出高效的代碼。下面整理一些知識點，算是React看書...

    Gilbertat 評論0 收藏0

  • Javascript事件流

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

    baiy 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<