您的位置：首页技术文章
文章详情页

javascript - JS事件委托问题

浏览：182日期：2022-11-23 16:08:54

问题描述

<!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>

我想问一下，这种用事件委托的方式获取索引的方式，有没有更加简单的方法呢？

问题解答

回答1：

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
上一条：javascript - 怎么通过Html5或者原声js实现图片在线裁剪成圆角矩形？下一条：javascript - 求助canvas绘制马赛克的问题，老是取色不准
相关文章：
1. nignx - docker内nginx 80端口被占用2. javascript - npm run build后调用api返回index.html3. docker安装后出现Cannot connect to the Docker daemon.4. docker绑定了nginx端口 外部访问不到5. java中关于直接插入排序遇到的问题。6. java - 如图，jsp页面的form中的action是怎么映射到这个位置的？为什么不写dynUser就可以映射到save？7. docker start -a dockername 老是卡住，什么情况？8. 关于docker下的nginx压力测试9. 我在centos容器里安装docker，也就是在容器里安装容器，报错了？10. 计算机 - 我学习了C语言，数据结构和一点点java基础，想自学C++，请问买什么入门书籍好？
排行榜
docker安装后出现Cannot connect to the Docker daemon.
docker安装后出现Cannot connect to the Docker daemon.
1. nignx - docker内nginx 80端口被占用
2. javascript - npm run build后调用api返回index.html
3. docker绑定了nginx端口 外部访问不到
4. 我在centos容器里安装docker，也就是在容器里安装容器，报错了？
5. java - 如图，jsp页面的form中的action是怎么映射到这个位置的？为什么不写dynUser就可以映射到save？
6. 关于docker下的nginx压力测试
7. angular.js - angular内容过长展开收起效果
8. 计算机 - 我学习了C语言，数据结构和一点点java基础，想自学C++，请问买什么入门书籍好？
9. docker start -a dockername 老是卡住，什么情况？
10. java中关于直接插入排序遇到的问题。
热门标签