事件委托ul返回li的索引

VIP文章 已于 2022-08-22 11:47:01 修改
阅读量554 收藏 2
点赞数 1
文章标签： javascript 前端 typescript
于 2022-08-22 11:42:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46545062/article/details/126462827
版权

事件委托ul返回li的索引

事件委托给ul，点击ul返回e.target ，创建li数组 通过返回的信息

所需知识点

  1. ul.children

    拿到ul所有的子元素（li）

  2. Array.from()

    Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。创建数组

  3. .indexOf()

    返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

  4. event.target

    触发事件的对象 (某个 DOM 元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时，它与event.currentTarget不同。

代码解析
 <ul>
        <li>这是第一行</li
最低0.47元/天 解锁文章
前端子闻
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
js如何给ul的所有的li绑定事件，打印他们的索引
青山不改，绿水长流。
09-22 901
console.log(this.innerHTML+",索引是"+ n) }itemli[i].index=i;//给每个li定义一个index属性。(function(n){ //利用闭包，
JavaScript：元素获取
qq_54517101的博客
08-18 540
代码】JavaScript：元素获取。
通过事件委托获取点击元素的索引
qq_42286878的博客
06-04 920
事件委托的运用
JavaScript事件
前端尨猫的博客
02-15 418
什么是事件？ 事件的组成： 触发谁的事件：事件源 触发什么事件：事件类型 触发以后做什么：事件处理函数 var oDiv = document.querySelector('div') oDiv.onclick = function () {} // 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv // 触发什么事件 => onclick => 这个事件类型就是 click // 触发之后做什么 => function
js事件委托 点击ul获取到里面所有li 不再单独for循环
爬楼梯的前端小白的博客
01-27 2009
js事件委托 点击ul获取到里面所有li 不再单独给每个li进行for循环遍历
jQuery在ul中显示某个li索引号的方法
10-24
主要介绍了jQuery在ul中显示某个li索引号的方法,涉及jQuery遍历元素的技巧,非常具有实用价值,需要的朋友可以参考下
JS遍历ul下的li点击弹出li的索引的实现方法
11-22
我们遍历ul 下所有的li 并添加点击事件，一般我们会在for循环里面添加点击事件，但是结果和我们所期盼不一样，那么是为什么呢？？？？ 接下来看看我们的js代码 var li = document.getElementsByTagName('li'); ...
css中使用ul li ul li ul li ul li 实现四层级联菜单
09-25
四级菜单的使用很常见实现的方法也有很多，在本文为大家介绍下使用ul li ul li ul li ul li 来轻松实现下，感兴趣的朋友可以参考下
JavaScript使用ul中li标签实现删除效果
12-10
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码，供大家参考，具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...
【前端小记】-- JavaScript--1.事件委托
am_xiao_hui的博客
08-26 379
事件委托就是不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。...
事件委托（代理/委派）
weixin_52212950的博客
03-03 323
事件委托也叫事件代理，jQuery中叫事件委派 事件委托就是不给每个子元素设置事件侦听器，而是给其父元素设置事件侦听器，然后利用冒泡阶段的原理影响每个子节点 给ul绑定注册事件，点击 li 标签后会冒泡，冒泡到其父元素 ul 身上，因为 ul 注册了事件，就会触发事件侦听器弹出提示框 <ul> <li>1</li> <li>2</li> <li>3</li>
ul列表事件（$(this).data('value') 这个是什么意思?）
weixin_30824479的博客
09-27 925
<ul class="am-dropdown-content " id="changeLanguage"> <li data-value="zh-CN"><a >简体中文</a></li><--!data-value是自定义属性--> <li data-value="zh-TW"><...
ul中获取当前点击的li的值
han_xiaoxue的博客
08-16 4040
html代码：                     最新课程             Java基础             数据库基础             JS代码： $(".chooseUl").children("li").click(function(e){         var chooseId = e.currentTarge
Vue中点击ul获取具体是点击的哪一个li
qq_43114230的博客
08-16 7474
需求描述 项目是基于Vue的，想要实现的功能是： 1、点击ul就知道具体是哪一个li在点击 2、不给li绑定点击事件，只给ul绑定点击事件，因为li很多，一个个给li绑定事件比较麻烦 3、通过知道是点击的哪一个li，进而进行跳转 项目特殊 这个项目中，li标签下面还嵌套了两个标签，分别是img标签和span标签。后面会说到li嵌套和不嵌套对解决这个问题的影响。 <li> <img src="..." alt="" /> <span>message</span&g
js获取当前点击元素的索引
热门推荐
慢才后生
11-14 1万+
以ul下的li元素为例；获取li的索引，代码如下： &amp;amp;amp;amp;amp;amp;amp;lt;ul id=&amp;amp;amp;amp;amp;amp;quot;list&amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;li&amp;amp;amp;amp;amp;amp;amp;g
事件委托及获取ul下li的index
weixin_45337430的博客
07-13 1120
事件委托，就是利用了事件冒泡的机制，在较上层位置的元素上添加一个事件监听函数，来管理该元素及其所有子孙元素上的某一类的所有事件。 适用场景：在绑定大量事件的时候，可以选择事件委托 优点 -事件委托可以减少事件注册数量，节省内存占⽤! -当新增⼦元素时，⽆需再次做事件绑定，因此非常适合动态添加元素 示例 <ul id="list"> <li>111</li> <li>222</li> <li>333</li&
js li 点击事件_事件委托(Html+Javascript)
weixin_42401159的博客
01-22 1866
什么是事件委托 事件委托又叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。为什么使用事件委托 庸俗的说，比如有一个ul下面有1万个li，不可能给每一个li添加绑定事件。一般我们通常会用for循环的方法，遍历所有元素，然后给他们添加点击事件，看似合理的做法，其实会很大的消耗性能。在js中频繁的操作Dome原生，会使浏览器多次重绘与重排，会影响页面的整个交互，w3c...
什么是事件委托？
周粥舟轴的博客
08-27 217
事件委托
学了事件委托才知道，原来有这么厉害的办法！
m0_64473852的博客
02-09 44
购物车的js代码
ul>li>ul>li>ul>li
最新发布
06-08
可以使用类似以下的代码来生成 `ul>li>ul>li>ul>li` 这样的 HTML 结构： ```javascript // 创建外层ul元素 const outerUl = document.createElement("ul"); // 创建第一个li元素 const li1 = document.createElement("li"); // 创建内层ul元素 const innerUl1 = document.createElement("ul"); // 创建内层li元素 const innerLi1 = document.createElement("li"); // 创建内层ul元素 const innerUl2 = document.createElement("ul"); // 创建内层li元素 const innerLi2 = document.createElement("li"); // 创建内层ul元素 const innerUl3 = document.createElement("ul"); // 创建内层li元素 const innerLi3 = document.createElement("li"); // 将内层li元素添加到内层ul元素中 innerUl3.appendChild(innerLi3); // 将内层ul元素添加到内层li元素中 innerLi2.appendChild(innerUl3); // 将内层li元素添加到内层ul元素中 innerUl2.appendChild(innerLi2); // 将内层ul元素添加到内层li元素中 innerLi1.appendChild(innerUl2); // 将内层li元素添加到内层ul元素中 innerUl1.appendChild(innerLi1); // 将内层ul元素添加到第一个li元素中 li1.appendChild(innerUl1); // 将第一个li元素添加到外层ul元素中 outerUl.appendChild(li1); // 将外层ul元素添加到body中 document.body.appendChild(outerUl); ``` 这段代码会生成以下的 HTML 结构： ```html <ul> <li> <ul> <li> <ul> <li> <ul> <li></li> </ul> </li> </ul> </li> </ul> </li> </ul> ``` 需要注意的是，这种方式不是很常见，一般来说没有这么多层嵌套。而且这种方式比较繁琐，不太容易维护。如果需要生成多层嵌套的 HTML 结构，可以考虑使用递归的方式来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值