事件代理的小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组件

本文来源于我的实践，不按期更新~