本文首发于我的个人博客,转载请注明来源和作者信息
想必大家都知道知道事件代理的好处了,不用绑定大量的事件,减少了代码书写量,同时也提高了性能。事件处理通常用来处理某一相同类型的事件。
场景一
<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组件
本文来源于个人实践,不定期更新~