html - JavaScript事件代理的触发源如何判定?
本文介绍了html - JavaScript事件代理的触发源如何判定?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
现在有一个ul
里面原本是空的,然后通过ajax请求数据生成许多个li
。而每个li
都有相关的操作。
这种类型的场景就很适合用事件代理了。
HTML结构如下:
<ul id="ul">
<li>
<div>
<button class="delete"><i classs="fa fa-cross"></i> 删除</button>
<button class="save"><i classs="fa fa-plus"></i> 添加</button>
</div>
</li>
<li>
<div>
<button class="delete"><i classs="fa fa-cross"></i> 删除</button>
<button class="save"><i classs="fa fa-plus"></i> 添加</button>
</div>
</li>
</ul>
现在每个li
有几个button
。那么我需要在ul
上面绑定两个监听器对应两个button
的点击事件。
var ul = document.getElementById("ul");
function delete_li( event ){
//具体实现
}
function append_li( event ){
//具体实现
}
ul.addEventListener("click" , delete_li);
ul.addEventListener("click" , append_li);
问题来了,不同的button
需要触发不同的函数。如果是单纯的button
那就很好办判定一下event .target
的class就好。
现在为了美观 里面是一个icon button
。event .target
就可以使是button
标签也可能是i
标签。
我知道通过if
的或条件可以枚举这两种情况。但是看起来太不优雅了。也许button
标签里面的结构还可能会更复杂。总不可能再来枚举吧。
有没有更好的解决方案?
我说的更好方案是即便html结构从
<button class="delete"><i classs="fa fa-cross"></i> 删除</button>
变成下面这样,甚至更复杂。我希望我尽量不用改js代码
<button class="delete">
<i classs="fa fa-cross"></i>
<div><span>删除</span></div>
</button>
解决方案
貌似很复杂。现在的问题就是使用事件代理中,如果点击的元素(此问题中的i)是我们可以轻易获得的节点(此问题中的button)的后代怎么办?
其实只要判断下i是不是button的后代元素就行了。诚如题主所说,button里面再复杂,只要看他是不是button的后代就行了,是的话就照样执行
伪代码如下
html:
<ul>
<li><button class='delete'><i class='fa sdf'></i></button></li>
</ul>
var btn=document.getElementByTagName('button')[0];
var nodes=btn.getElementsByTagName('*');//button元素所有的后代元素的集合
var i=btn.getElementByTagName('i')[0];
ul.addEventListener('click',function(e){
var event=e||window.event;
var index=[].indexOf.call(nodes,event);//如果点击的元素不是button,那就看点击的元素是不是button的后代
if(event.target.className=='delete'||index>-1){
//执行函数
}
},false);
这样就算button里面再复杂也不怕了
这篇关于html - JavaScript事件代理的触发源如何判定?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文