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

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

    原文作者:浴火小青春
    原文地址: https://www.jianshu.com/p/ecd2d47fc480
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞