DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 深入分析Javascript事件代理
深入分析Javascript事件代理
編輯:JavaScript基礎知識     

很久很久以來,總感覺事件發生與事件代理到之間沒什麼鳥區別。

最近,又看了一下,感覺區別其實真不大!看怎麼理解吧。

要搞清楚什麼是事件代理,就需要先搞清楚什麼是代理。

從商業角度來講,代理就是:我有貨,你沒貨,但丫我沒時間、沒精力全部賣掉,而你一天閒的蛋疼,只剩下時間了。於是,我委托你幫我買,然後哥給你提成。這個過程中,你實際上相當於也有了貨。

OK,怎麼從字面來理解事件代理一詞的含義?後文有講。

一 先看一個真實的,新手綁定onclik事件的例子

如果按照之前的我,我會怎麼給每一個li標簽,添加onlick呢?廢話,要是我,肯定簡單粗暴。
循環每一個li,然後全部綁定onlick。

於是我的代碼應該是這樣子:

<ul id="thl">
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

<script>
  var thl= document.getElementById('thl');
  var aLi = thl.getElementsByTagName('li');
  for (var i = 0; i < aLi.length; i++) {
    aLi[i].onclick = fn;
  }
  
  function fn (){
   console.log("maomaoliang");
  }
</script>

好像看起來沒問題了。雖然,有些文章說這樣很消耗性能,但是,我丫電腦好,老子管你性能,不能太認真。

二 突然有一天,我發現通過js添加進來的新的li,沒有綁定onlcik

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

然後,點擊maomaoliang,它並沒有綁定我的onlick,這是為什麼?
哦,原來,我原有的li跟我後面生成的li根本不是同時發生的,在創建新的li元素之前,已經給存在的li加事件了。好吧,好煩啊。

三 那怎麼破?

然後,又好(無)奇(奈)的看了一些文章,原來有個叫事件代理的東西可以用。我就試試看吧!於是改寫了部分代碼,像這樣:

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容處理
  var target = ev.target || ev.srcElement;
  //找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     fn();
   }
};

function fn (){
 console.log("maomaoliang");
}

結果,點擊新的li,居然也觸發了fn函數。好吧,身為一個好奇心驅動的肉身,我怎麼能不求甚解呢?還是要踏實點,搞清楚這其中的奧秘才行。

於是,看了事件代理的資料。

首先,要知道什麼是事件冒泡:當一個元素上的事件被觸發的時候,比如說鼠標點擊了一個按鈕,同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡。

然後,再回到之前的問題“怎麼從字面來理解事件代理一詞的含義”,誰代理了事件?或者事件代理了誰?
以本文的例子來講,看看改動後的代碼,我把onlick事件綁定到了ul標簽上面,而不是li標簽。於是,當我點擊任何一個li標簽(不管是動態生成的還是之前就有的)是,這個事件就像泡泡一樣,冒啊冒。正常的情況下,ul也會綁定onclick,body也會綁定到onclick,也就說它會冒泡到最根層的元素。但我這裡給ul綁定了onlick,那麼這時,ul會把泡泡截住,事件也就停止上升,無法抵達body標簽。

接著, var target = ev.target || ev.srcElement;這一句話,相當於告訴了我,我究竟點的是誰,誰才是target。如果,這個target剛剛好就是li標簽if (target.nodeName.toLowerCase() == 'li'),那麼執行fn函數。

最後,我驕傲的回答了那個問題:table代理了onlick事件!

四 回憶一下事件代理的步驟

父元素綁定事件
父元素知道事件的實際發生目標是誰
我們要對目標進行判斷,如果是我們需要的元素,則發生回調函數(所以要學好選擇器的使用)

五 最後總結,事件代理兩大好處

性能不小心得到了優化
動態添加的元素也能綁定事件了

六 需要注意的一點是

上述針對的是原生js事件綁定來講的,如果你用到了jquery。並把代碼改成了如下的樣子:

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容處理
  var target = ev.target || ev.srcElement;
  //找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     //li添加的事件
     fn();
   }
};*/

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

function fn (){
 console.log("maomaoliang");
}

$("#ul1").click(function(){
  fn();
});

這樣一來,新添加的li標簽,也能綁click,是不是很方便、很簡單,是不是感覺學js沒什麼卵用。

哈哈,這樣想很正常,我以前也這麼想,但是,做了一些東西之後,發現jquery還真的不夠用了!但是基本夠用!

雖然,大神們都說要學js,但我還是覺得可以先學jquery,之後再學js,效果也可以的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved