本文首發(fā)于我的個人博客绵咱，轉(zhuǎn)載請注明來源和作者信息
想必大家都知道知道事件代理的好處了江醇，不用綁定大量的事件，減少了代碼書寫量壶熏，同時也提高了性能。事件處理通常用來處理某一相同類型的事件浦译。
場景一
<ul>
<li></li>
<li></li>
<li></li>
</ul>
我們可能通常會遇見這樣的情況棒假，尤其是在列表中溯职，就是要根據(jù)每個列表項的次序來執(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);//根據(jù)不同的次序執(zhí)行函數(shù)
}
},false);
場景二
<div>
<span class='active' id='a' data-index='1'>hello<i></i></span>
</div>
。我們可以通過e.target獲得當(dāng)前事件處理的目標(biāo)妻枕，通常我們獲得這個確定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（小圖標(biāo)）,此時我事件作用的目標(biāo)是<i></i>屡谐，按我們的想法來說無論是作用到icon還是作用到span述么，我們都是想讓他執(zhí)行下去的。問題就在于此愕掏，作用的元素是確定元素的子（孫）元素那怎么辦度秘？？饵撑？
好辦敷钾，判斷事件目標(biāo)是不是該元素的子（孫）元素就行了！Ｒ蘩妗阻荒！
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的后代侨赡。這個技巧挺有用的，比如說還可以在搜索框自動完成的時候會遇到粱侣，當(dāng)搜索框失去焦點羊壹，suggest列表要消失，點擊頁面中的元素我們讓suggest框消失齐婴，但是點擊了suggest lists怎么辦油猫？先消失的話，就不能跳轉(zhuǎn)對應(yīng)的網(wǎng)址了柠偶？這個時候我們就要判斷點擊的目標(biāo)在不在suggest lists內(nèi)情妖，如果在的話就先跳轉(zhuǎn)再消失了。
詳情可了解autocomplete組件
本文來源于個人實踐诱担，不定期更新~
