本文首發(fā)于我的個人博客，轉載請注明來源和作者信息

想必大家都知道知道事件代理的好處了，不用綁定大量的事件，減少了代碼書寫量，同時也提高了性能。事件處理通常用來處理某一相同類型的事件。

場景一

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

我們可能通常會遇見這樣的情況，尤其是在列表中，就是要根據每個列表項的次序來執(zhí)行不同的函數(shù)。那我們怎樣獲取他在整個listItems里的次序呢？
就是利用indexOf方法。偽代碼如下：

 var ul=document.getElemenstByTagName('ul')[0];
 var listItems=ul.getElementsByTagName('li');
 ul.addEventListener('click',function(e){
    if(e.target.tagName.toLowerCase()=='li'){
      var idx=[].indexOf.call(listItems,e.target);
       doSomething(idx);//根據不同的次序執(zhí)行函數(shù)
    }
 },false);

場景二

<div>
<span class='active' id='a' data-index='1'>hello<i></i></span>
</div>

。我們可以通過e.target獲得當前事件處理的目標，通常我們獲得這個確定span元素的方法有
1. e.target.id=='a' 2. e.target.tagName/nodeName.toLowerCase()=='span' 3. e.target.className(e.target.classList.contains)=='active' 4. e.target.dataset.index==1
這個時候我們再給span綁定事件后再執(zhí)行就好了。但是可是正如例子中所給，假如說我們也給<i></i>是icon（小圖標）,此時我事件作用的目標是<i></i>，按我們的想法來說無論是作用到icon還是作用到span，我們都是想讓他執(zhí)行下去的。問題就在于此，作用的元素是確定元素的子（孫）元素那怎么辦？？？

好辦，判斷事件目標是不是該元素的子（孫）元素就行了?。?！

var span=document.getElementsByTagName('span')[0];
var div=document.getElementsByTagName('div')[0];
div.addEventListener('click',function(e){
   var allChilds=span.getElementsByTagName('*');
   if(e.target.dataset.index==1||[].indexOf.call(allChilds,e.target)!=-1){
    doSomething();
   }
},false);

我們通過找到span元素的所有后代，這個一個nodeLists,然后判斷點擊的元素在不在這個集合里面，從而判斷了點擊的元素是不是span的后代。這個技巧挺有用的，比如說還可以在搜索框自動完成的時候會遇到，當搜索框失去焦點，suggest列表要消失，點擊頁面中的元素我們讓suggest框消失，但是點擊了suggest lists怎么辦？先消失的話，就不能跳轉對應的網址了？這個時候我們就要判斷點擊的目標在不在suggest lists內，如果在的話就先跳轉再消失了。
詳情可了解autocomplete組件

本文來源于個人實踐，不定期更新~