事件代理的小Tips

galois 发布于2019-08-19 18:01 / 2178人阅读

摘要：事件代理的小想必大家都知道知道事件代理的好处了，不用绑定大量的事件，减少了代码书写量，同时也提高了性能。事件处理通常用来处理某一相同类型的事件。

事件代理的小Tips

想必大家都知道知道事件代理的好处了，不用绑定大量的事件，减少了代码书写量，同时也提高了性能。事件处理通常用来处理某一相同类型的事件。

场景一

我们可能通常会遇见这样的情况，尤其是在列表中，就是要根据每个列表项的次序来执行不同的函数。那我们怎样获取他在整个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);

场景二


hello

。我们可以通过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绑定事件后再执行就好了。但是可是正如例子中所给，假如说我们也给是icon（小图标）,此时我事件作用的目标是，按我们的想法来说无论是作用到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组件

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

云服务器 GPU云服务器事件代理 Javascript事件代理 tips tips1

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79101.html

11种方法实现一个tips带有描边的小箭头（更新中...）

摘要：查看效果第六种和背景描边旋转此方法就是设置一个宽度和高度分别为的方块背景，然后背景相邻的两条边描边再有的属性旋转角度，来实现箭头的朝向。 showImg(https://segmentfault.com/img/bVbmX2F?w=400&h=277); 我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边...

oneasp 2019-08-30 15:55 评论0 收藏0
11种方法实现一个tips带有描边的小箭头（更新中...）

摘要：查看效果第六种和背景描边旋转此方法就是设置一个宽度和高度分别为的方块背景，然后背景相邻的两条边描边再有的属性旋转角度，来实现箭头的朝向。 showImg(https://segmentfault.com/img/bVbmX2F?w=400&h=277); 我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边...

李涛 2019-08-02 13:58 评论0 收藏0
CSS3实战之一些常用Tips

摘要：本文为部分翻译文章，主要内容来自于，笔者自身也添加了一些自己的小的。设置自动居中任何一个元素的自动居中可以使用属性使用逗号分割列表使用负的属性选择元素使用作为使用作为图标可以达到自动缩放的效果。本文为部分翻译文章，主要内容来自于：css-protips，笔者自身也添加了一些自己的小的Tips。使用:not()属性为导航添加或者去除边框传统的方法是首先为每个li标签添加标签： /*...

joywek 2019-08-28 18:19 评论0 收藏0