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

javascript - JS事件委托问题

浏览：236日期：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. node.js - express router中无法获取session2. java - servlet的init方法和选择Filter的init方法来加载配置文件，二者有何区别？3. docker start -a dockername 老是卡住，什么情况？4. node.js - 如何调用hexo渲染 ``` ``` 代码块的渲染引擎5. javascript - 怎么实现点击表格中的某一行然后就在表单处出现表格中的对应的属性值啊6. 大家好，我想请问一下怎么做搜索栏能够搜索到自己网站的内容。7. javascript - react-router 4.0版本怎么实现以前onEnter的效果8. docker - 如何修改运行中容器的配置9. docker-compose 为何找不到配置文件？10. docker-machine添加一个已有的docker主机问题
排行榜
关于docker下的nginx压力测试
关于docker下的nginx压力测试
1. docker - 如何修改运行中容器的配置
2. 为什么我ping不通我的docker容器呢？？？
3. 大家好，我想请问一下怎么做搜索栏能够搜索到自己网站的内容。
4. docker-machine添加一个已有的docker主机问题
5. docker start -a dockername 老是卡住，什么情况？
6. java - servlet的init方法和选择Filter的init方法来加载配置文件，二者有何区别？
7. docker-compose 为何找不到配置文件？
8. node.js - 如何调用hexo渲染 ``` ``` 代码块的渲染引擎
9. node.js - express router中无法获取session
10. javascript - react-router 4.0版本怎么实现以前onEnter的效果
热门标签