欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談addEventListener和attachEvent的區(qū)別

 更新時(shí)間:2016年07月14日 09:39:45   投稿:jingxian  
下面小編就為大家?guī)?lái)一篇淺談addEventListener和attachEvent的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

• addEventListener共有3個(gè)參數(shù),如下所示:

element.addEventListener(type,listener,useCapture);

參數(shù) 參數(shù)說(shuō)明
element 要綁定事件的對(duì)象,及HTML節(jié)點(diǎn)。
type 事件名稱,注意去掉事件前邊的“on”,比如“onclick”要寫成“click”,“onmouseover”要寫成“mouseover”。
listener 要綁定的事件監(jiān)聽函數(shù),注意只寫函數(shù)名,不要帶括號(hào)。
userCapture 事件監(jiān)聽方式,只能是true和false:true,采用capture(捕獲)模式;false,采用bubbling(冒泡)模式。如無(wú)特殊要求,一般是false。

這里有必要說(shuō)一下捕獲模式和冒泡模式的區(qū)別。


如圖所示,有兩層div元素,而且都設(shè)定有click事件,一般來(lái)說(shuō),如果我在內(nèi)層藍(lán)色的元素上click不只會(huì)觸發(fā)藍(lán)色元素的click事件,還會(huì)同時(shí)觸發(fā)紅色元素的click事件,而useCapture這個(gè)參數(shù)就是在控制這時(shí)候兩個(gè)click事件的先后順序。如果是false,那就會(huì)使用bubbling(冒泡)模式,他是從內(nèi)而外的流程,所以會(huì)先執(zhí)行藍(lán)色元素的click事件再執(zhí)行紅色元素的click事件,如果是true,那就是capture(捕獲)模式,和bubbling(冒泡)模式相反是由外而內(nèi),會(huì)先執(zhí)行紅色元素的click事件才執(zhí)行藍(lán)色元素的click事件。

如果不同層的元素使用的useCapture不同,會(huì)先從最外層元素往目標(biāo)元素尋找設(shè)定為capture(捕獲)模式的事件,到達(dá)目標(biāo)元素執(zhí)行目標(biāo)元素的事件后,再尋原路往外尋找設(shè)定為bubbling(冒泡)模式的事件。

•attachEvent共有2個(gè)參數(shù),如下所示:

element.attachEvent(type,listener);

參數(shù) 參數(shù)說(shuō)明
element 要綁定事件的對(duì)象,及HTML節(jié)點(diǎn)。
type 事件名稱,注意加上事件前邊的“on”,比如“onclick”和“onmouseover”,這是與addEventListener的區(qū)別。
listener 要綁定的事件監(jiān)聽函數(shù),注意只寫函數(shù)名,不要帶括號(hào)。

addEventListener()是標(biāo)準(zhǔn)的綁定事件監(jiān)聽函數(shù)的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數(shù);但是,IE8.0及其以下版本不支持該方法,它使用attachEvent()來(lái)綁定事件監(jiān)聽函數(shù)。所以,這種綁定事件的方法必須要處理瀏覽器兼容問題。

兼容IE和非IE瀏覽器事件綁定的代碼:

function addEvent(obj,type,handle){
  try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    obj.addEventListener(type,handle,false);
  }catch(e){
    try{ // IE8.0及其以下版本
      obj.attachEvent('on' + type,handle);
    }catch(e){ // 早期瀏覽器
      obj['on' + type] = handle;
    }
  }
}

或者

function regEvent(ele, event_name, fun)
{
  if (window.attachEvent) 
    ele.attachEvent(event_name, fun); //IE瀏覽器
  else
  {
    event_name = event_name.replace(/^on/, “”);  //如果on開頭,刪除on,如onclick->click
    ele.addEventListener(event_name, fun, false); //非IE瀏覽器
  }
}


以上這篇淺談addEventListener和attachEvent的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論