事宜代办的小Tips

2024年4月18日 237次阅读 来源: 浴火小青春

事宜代办的小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://segmentfault.com/a/1190000004857657
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞