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

本文来源于个人实践，不定期更新~