jQuery基本事件代碼優化的示例分析

這篇文章主要介紹了jQuery基本事件代碼優化的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

事件模型

說到事件，就要追溯到網景與微軟的“瀏覽器大戰”了。當時，事件模型還沒有標準，兩家公司的實現就是事實標準。網景在Navigator中實現了“事件捕獲”的事件系統，而微軟則在IE中實現了一個基本上相反的事件系統，叫做“事件冒泡”。這兩種系統的區別在于當事件發生時，相關元素處理(響應)事件的優先權不同。

下面舉例說明這兩種事件機制的區別  。假設文檔中有如下結構：

<div>       <span>           <a>...a>       span>   div>

因為這三個元素是嵌套的，所以單擊了a，實際上也就單擊了span和div  。換句話說，這三個元素都應該有處理單擊事件的機會  。在事件捕獲機制下，處理這個單擊事件的優先次序是：div > span > a;而在事件冒泡機制下，處理這個單擊事件的優先次序則是：a > span > div  。

后來，W3C的規范要求瀏覽器同時支持捕獲和冒泡機制，并允許開發人員選擇把事件注冊到哪個階段  。于是就有了下面這個注冊事件的標準方法

target.addEventListener(type, listener, useCapture Optional );

其中：

type：字符串，表示監聽的事件類型

listener：監聽器對象(JavaScript函數)，在指定事件發生時可以收到通知

useCapture：布爾值，是否注冊到捕獲階段

在實際應用開發中，為了確保與IE(因為它不支持捕獲)兼容，useCapture一般都指定為false(默認值也是false)  。換句話說，只把事件注冊到冒泡階段;對于上面那個簡單的例子來說，響應順序就是：a > span > div  。

冒泡的副作用

如前所述，IE的冒泡事件模型基本上成為了事實標準。但冒泡有一個副作用。

仍以前面的文檔結構為例，假設它是界面中的一個菜單項，我們希望用戶鼠標離開div時隱藏菜單。于是，我們給div注冊了一個mouseout事件  。如果用戶鼠標是從div離開的，那么一切正確  。而如果用戶鼠標是從a或span離開的，問題就來了。因為由于事件冒泡，從這兩個元素開始分派的mouseout事件都會傳播到div，從而導致鼠標并沒有離開div，菜單就提前隱藏了。

當然，冒泡的副作用不難避免  。比如，給div內部的每個元素都注冊mouseout事件，并使用.stopPropagation()方法阻止事件進一步傳播  。對于IE，就得將事件對象的cancelBubble屬性設置為false，取消事件冒泡  。不過，這仍然回到自己處理瀏覽器不兼容性問題的老路上了  。

優化方案

為了避免冒泡的副作用，jQuery提供了mouseenter和mouseleave事件，就使用它們來代替mouseover和mouseout吧  。

下面這個摘自jQuery的內部函數withinElement，就是為mouseenter和mouseleave提供支持的  。翻譯了一下注釋，僅供大家參考  。

// 下面這個函數用于檢測事件是否發生在另一個元素的內部    // 在 jQuery.event.special.mouseenter 和 mouseleave 處理程序中使用    var withinElement = function( event ) {        // 檢測 mouse(over|out) 是否還在相同的父元素內        var parent = event.relatedTarget;           // 設置正確的事件類型        eventevent.type = event.data;           // Firefox 有時候會把 relatedTarget 指定一個 XUL 元素        // 對于這種元素，無法訪問其 parentNode 屬性        try {               // Chrome 也類似，雖然可以訪問 parentNode 屬性            // 但結果卻是 null            if ( parent && parent !== document && !parent.parentNode ) {                return;            }               // 沿 DOM 樹向上            while ( parent && parent !== this ) {                parentparent = parent.parentNode;            }               if ( parent !== this ) {                // 如果實際正好位于一個非子元素上面，那好，就處理事件                jQuery.event.handle.apply( this, arguments );            }           // 假定已經離開了元素，因為很可能鼠標放在了一個XUL元素上        } catch(e) { }    },

感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery基本事件代碼優化的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!