js li 点击事件_事件委托(Html+Javascript)

最新推荐文章于 2023-09-14 09:30:41 发布
最新推荐文章于 2023-09-14 09:30:41 发布
阅读量1.8k 收藏 1
点赞数
文章标签： js li 点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42401159/article/details/113451885
版权
888b9a891ceb4317cad24699ff4f2fc5.png

什么是事件委托

事件委托又叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

为什么使用事件委托

庸俗的说，比如有一个ul下面有1万个li，不可能给每一个li添加绑定事件。一般我们通常会用for循环的方法，遍历所有元素，然后给他们添加点击事件，看似合理的做法，其实会很大的消耗性能。在js中频繁的操作Dome原生，会使浏览器多次重绘与重排，会影响页面的整个交互，w3c里也提出尽量减少对Dome的操作。下面看代码！

Html结构

a3440bb281ae083c4c85565ba90797f4.png

Js代码

第一种方式

首先获取页面所有的li，当然我这也页面只有ul,li,没有别的标签，实战项目更具实际情况获取。第二部遍历数据。

477b1cb37cc6e53479b158fdb154bf32.png

第二种方式

获取到父级元素，利用事件委托给每一个li添加事件。

8123d9ed6f3e625f66273dfd278ee0a6.png

今天的事件委托就到这里了！最近这几天没有发文章，一直在弄webpack，中间遇到很多坑，每天各种采坑，等我研究明白后在发出来，让更多的小伙伴远离采坑，当然采坑是一个很享受的过程。

邦加拉斯
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
4种方法解决为 li列表 添加事件问题（for循环经典问题）
liuyuemozhu的博客
09-07 4291
在for循环中，为每个li列表添加事件的时候，总是需要得到每个li对应的下标值，这是就会产生一个问题，这篇博客代码就是分析问题产生的本质和提供了4种方法来解决问题
添加li标签点击事件，删除当前点击li标签
weixin_57772211的博客
04-28 2122
添加li标签点击事件，删除当前点击li标签
js为li列表添加点击事件
热门推荐
caoPengFlying的博客
11-09 5万+
今天看到一个面试题目//html代码 <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> //js代码 var oli = document.getElementsByTagName("li"); for(var i=0; i<oli.length; i++){
实时获取ul元素下li的点击对象
滴水石穿
07-31 313
实时获取ul元素下li的点击对象。情况一：li 元素上没有选择器。情况二：li 元素上有选择器。
js为li添加点击事件，并且输出当前li点击的值
qq_39266265的博客
03-07 1万+
在使用js开发过程中，经常会遇到这样一个问题“如何对多个li添加onClick点击事件，并且输出点击对象的当前内容”。这是我们就想到了常用的for循环，如下图所示： 直接输出当前点击对象的内容 通过运行会发现依次点击li分别会弹出0,1,2； 由这类问题会引发一系列的问法，如果我们alert的是当时循环中的i值会出现什么情况： 直接输出循环中的i值 此时通过运行会发现无论点击那个li...
给ui下面的li绑定事件
最新发布
qq_41632427的博客
09-14 147
给ui下面的li绑定事件 ``` 给下面的每个li绑定点击事件 点击打印的结果分别是 1 2 3(提示：事件委托) 1 2 3 Document 1 2 3 </ul> <script> var ul = document.querySelector('ul')...
JavaScript事件委托技术实例分析
12-29
本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下： 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多...
JavaScript事件委托的技术原理探讨示例
12-11
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子...
javascript 中的事件委托详解
11-27
大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看. 　首先说一下事件冒泡和...
JavaScript之事件委托实例(附原生js和jQuery代码)
01-19
事件委托的原理依赖于事件冒泡，可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。 使用事件委托的优点 1、操作子元素时不用一一遍历，可以根据事件触发的对象而进行相应操作 dom结构如下...
JavaScript给每一个li节点绑定点击事件的实现方法
10-21
主要介绍了JavaScript给每一个li节点绑定点击事件的实现方法，包括js循环给li绑定参数不同的点击事件,需要的朋友可以参考下
javascript性能优化之事件委托实例详解
12-28
本文实例分析了javascript性能优化之事件委托。分享给大家供大家参考，具体如下： 为下面每个LI绑定一个click事件 <li id=goSomewhere>Go somewhere</li> <li id=doSomething>Do something</li> <li id=sayHi>...
数据库常用的四种方法
weixin_43457011的博客
09-08 1667
排序查询 select 列表属性，列表属性 from 列表名order by 列表属性，列表属性; 删除 delete from 列表名 where 列表属性=“值” 插入 insert into 列表名 values(值，值，值，值） insert into 列表名 （列1，列2，…）valves(值1，值2…) 修改 update 列表名 set 列表属性=新值 where 列表属性=某值 ...
html委托事件,事件委托.html
weixin_33328836的博客
06-09 195
事件委托li{height:30px;border:1px solid #000;background-color: #ccc;}li span{float: right;font-size: 20px;cursor: pointer;}$(function(){// 点击关闭按钮时关闭一整行/*$('ul li span').click(function(){$(this).parent().r...
html中取消li的点击事件,jquery设置html li点击click事件为什么无法赋值到表单input value中呢？...
weixin_33636371的博客
06-05 258
小弟最近在做一个项目。用到了闭包的问题，是这样的，页面中有一堆li(动态加载的)，点击某一个的时候获取对应的index，然后把index赋值到input标签中的value,但是怎么都赋值不上。不知道咋回事。请牛牛们指教。先给4个牛B吧(弟弟穷！！)方式1(直接赋值)：$(".evaH_week li").each(function(index){$(this).click(function(){a...
li禁用点击事件
qq_38891182的博客
07-17 5805
css样式： style="pointer-events: none;"
li绑定事件
wqewq19的博客
07-12 999
1、$('li').bind('click',function(){}); 当你用js动态添加li的时候，你添加的li不具有你绑定的事件。这种写法与$('li').click(function(){})一样。 2、$('li').live('click',function(){}); 当你用js动态添加li的时候，你添加的li具有你绑定的事件...
js事件委托怎么知道点击第几个child
05-12
当使用事件委托时，通常需要使用事件对象的 `target` 属性。 例如，在一个 `ul` 元素中，我们希望处理被点击的 `li` 子元素的点击事件，可以在 `ul` 上添加一个点击事件的监听器，然后在事件处理程序中检查 `target` 属性以确定被点击的元素是否是 `li` 元素。如果是 `li` 元素，可以使用 `querySelectorAll` 方法获取所有的 `li` 元素，并根据其在列表中的索引来确定点击的是哪一个子元素。 举个例子，以下是一个示例代码： ```html <ul id="list"> <li>第一个</li> <li>第二个</li> <li>第三个</li> </ul> ``` ```javascript const list = document.getElementById('list'); list.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { const children = list.querySelectorAll('li'); const index = Array.from(children).indexOf(event.target); console.log(`点击了第 ${index + 1} 个子元素`); } }); ``` 在上面的示例代码中，当点击 `ul` 元素中的任意一个 `li` 子元素时，会通过 `querySelectorAll` 方法获取到所有的 `li` 子元素，然后使用 `indexOf` 方法获取被点击的 `li` 元素在列表中的索引，最后输出点击的是第几个子元素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值