javascript事件代理（委託）

標籤：

　　之前有接觸過事件代理，但是印象並不深刻。這次記下來加強印象。

　　用個大家比較常見的代碼舉例子：

　　html dom結構：

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

<script>var oUl = document.getElementById(‘ul1‘);var aLi = oUl.getElementsByTagName(‘li‘);for (var i = 0, i = aLi.length; i++) {　　aLi.onclick = fn;}</script>

 

　　需求：如果需要給每個li添加點擊事件。

　　常規實現方法：遍曆每個li，給每個li單獨加點擊事件。

　　缺點：

　　　　1、假如現在頁面有很多個li，比如門戶新聞網站新聞列表。如果需要遍曆的話，比較影響效能。

　　　　2、如果新添加一個li，比如發微博的時候，剛剛發出來的微博，會不會剛發出來的微博就帶事件了。

　　　　　　針對第2點：答案是新建立的元素是不帶有之前遍曆的事件，因為在建立元素之前，已經遍曆完li，給已經存在的li加事件了。

　　解決方案：

　　　　為瞭解決上面這兩個缺點，我們用事件代理，也叫事件委託的方式實現。

　　　　為了更好理解事件委託，應該先瞭解一下事件冒泡知識。在這裡，我就不詳細說事件冒泡了。

　　　　根據事件冒泡或者捕獲的特性，我們可以給ul加點擊事件。

　　代碼：

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

　　總結：雖然ev對象有一定的相容性，但是在此處相容性處理並不難。其實事件委託本質就是給多組元素的父級加事件，再利用冒泡或者捕獲找到下面的子項目，然後單獨綁定事件。

 

javascript事件代理（委託）