日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 

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

其中：

type：字符串，表示監(jiān)聽的事件類型

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

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

在實(shí)際應(yīng)用開發(fā)中，為了確保與IE(因?yàn)樗恢С植东@)兼容，useCapture一般都指定為false(默認(rèn)值也是false)  。換句話說，只把事件注冊到冒泡階段;對于上面那個簡單的例子來說，響應(yīng)順序就是：a > span > div  。

冒泡的副作用

如前所述，IE的冒泡事件模型基本上成為了事實(shí)標(biāo)準(zhǔn)。但冒泡有一個副作用。

仍以前面的文檔結(jié)構(gòu)為例，假設(shè)它是界面中的一個菜單項(xiàng)，我們希望用戶鼠標(biāo)離開div時隱藏菜單。于是，我們給div注冊了一個mouseout事件  。如果用戶鼠標(biāo)是從div離開的，那么一切正確  。而如果用戶鼠標(biāo)是從a或span離開的，問題就來了。因?yàn)橛捎谑录芭?，從這兩個元素開始分派的mouseout事件都會傳播到div，從而導(dǎo)致鼠標(biāo)并沒有離開div，菜單就提前隱藏了。

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

優(yōu)化方案

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

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

 
 

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

結(jié)論

在jQuery里，可以使用mouseenter和mouseleave事件來避免事件冒泡的副作用。