javascript - JS事件委托问题
本文介绍了javascript - JS事件委托问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li{
list-style: none;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
var Ul = document.getElementById("ul");
var Li = Ul.getElementsByTagName("li");
Ul.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
var index = 0;
for(var i=0;i<Li.length;i++){
if(Li[i]===target){
index=i;
};
}
if(index>=0){
alert('索引是'+index);
}
}
}
}
</script>
</head>
<body>
<ul id="ul">
<li>首页</li>
<li>新闻</li>
<li>娱乐</li>
</ul>
</body>
</html>
我想问一下,这种用事件委托的方式获取索引的方式,有没有更加简单的方法呢?
解决方案
children
转换为Array
,然后直接调用indexOf
。(没考虑兼容性……)
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
const ul = document.querySelector('#ul')
const children = Array.prototype.slice.call(ul.children)
ul.onclick = (ev) => {
const target = ev.target;
console.log('current index', children.indexOf(target))
}
这里有个例子
这篇关于javascript - JS事件委托问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文