事件代理的小Tips

事件代理的小Tips

---

想必你們都知道知道事件代理的好處了，不用綁定大量的事件，減小了代碼書寫量，同時也提升了性能。事件處理一般用來處理某一相同類型的事件。

---

場景一

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

咱們可能一般會碰見這樣的狀況，尤爲是在列表中，就是要根據每一個列表項的次序來執行不一樣的函數。那咱們怎樣獲取他在整個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);//根據不一樣的次序執行函數
    }
 },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綁定事件後再執行就行了。可是但是正如例子中所給，假如說咱們也給<i></i>是icon（小圖標）,此時我事件做用的目標是<i></i>，按咱們的想法來講不管是做用到icon仍是做用到span，咱們都是想讓他執行下去的。問題就在於此，做用的元素是肯定元素的子（孫）元素那怎麼辦？？？

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

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組件

本文來源於我的實踐，不按期更新~