li标签绑定事件比如有1000个li标签需要点击，显示对应li标签的内容，

最新推荐文章于 2023-09-01 10:33:00 发布
最新推荐文章于 2023-09-01 10:33:00 发布
阅读量852 收藏 2
点赞数 1
文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45846980/article/details/108435498
版权
博客探讨了在JavaScript中如何避免为大量li标签逐一绑定事件，以提高性能并减少内存占用。通过事件代理（Event Delegation）利用事件冒泡机制，只需在父元素上绑定一次事件，即可处理所有子元素的事件。这种方法不仅节省了内存，还能应对动态内容的事件绑定问题，但需注意可能存在的事件误判风险。
摘要由CSDN通过智能技术生成

 源自于一道面试题，可能大多数人会选择使用循环遍历给1000个li添加事件，但这样效率低不说，并且还占用浏览器性能，要知道内存可是寸土寸金的地方，用大量内存来处理，用法简短但却极其占据内存的事，而且还产生了闭包的效果，是不明智的选择。那hr想听到的答案是啥了，且听我以下分解

首先我先展示下不正确的做法

<ul>
 
<li>1</li>
 
<li>2</li>
 
<li>3</li>
 
<li>4</li>
 
</ul
最低0.47元/天 解锁文章
weixin_45846980
关注
js循环给li绑定事件实现 点击li弹出其索引值 和内容的方法
04-07
js循环给li绑定事件实现 点击li弹出其索引值 和内容的方法
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
运维玄德公
05-31 6342
1. 点击事件参数（click） 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件 说明 示例 2. 点击事件修饰符 2.1 .stop （阻止冒泡） 使用说明 使用示例 2.2 capture （捕获冒泡） 使用说明 使用示例 2.3 .self （只监听触发该元素的事件） 使用说明 使用示例 2.4 once （事件只触发一次） 使用说明 使用示例 2.5 鼠标的修饰符......
20230829-给ui下面的li绑定事件
最新发布
qq_41632427的博客
09-01 253
【代码】20230829-给ui下面的li绑定事件。
添加li标签点击事件，删除当前点击li标签
weixin_57772211的博客
04-28 2181
添加li标签点击事件，删除当前点击li标签
js如何给ul的所有的li绑定事件，打印他们的索引
青山不改，绿水长流。
09-22 979
console.log(this.innerHTML+",索引是"+ n) }itemli[i].index=i;//给每个li定义一个index属性。(function(n){ //利用闭包，
jQuery动态添加li标签并添加属性和绑定事件方法
10-18
这个事件处理函数会在每个`li`元素被点击时执行，弹出一个提示框显示“事件绑定成功！”的消息。 **总结** 在实际开发中，动态添加元素和绑定事件是常见的需求，特别是在处理数据驱动的界面或响应用户操作时。...
JS实现点击li标签弹出对应的索引功能【案例】
10-17
然后，为每个`<li>`标签添加一个点击事件监听器，当点击事件触发时，通过`this.getAttribute('index')`获取到`index`属性的值，并将其显示在警告框中。 以下是方法一的完整代码示例： ```html <!DOCTYPE html> ...
Angular中点击li标签实现更改颜色的核心代码
08-28
在上面的代码中，我们使用了ng-click指令来绑定li标签的点击事件，并将该事件绑定到$scope对象的li_click方法上。当用户点击li标签时，该方法将被执行，并将当前li标签的索引值传递给该方法。 接下来，让我们来了解...
JavaScript给每一个li节点绑定点击事件的实现方法
01-21
1.单击事件 <body> <h2>javascript 事件 <li>aaaa</li> <li>aaaa111</li> <li>aaaa222</li> <li>aaaa3333</li> ...//给每个li绑定事件 for(var i = 0;i<list.length;i++){ list[i].onclick = function(){
li标签绑定事件比如有1000个li标签需要点击，显示对应li标签的内容，有什么高效的方法
xiaoxiaofly的博客
09-11 1783
关于在前端面试中，经常会被技术人员问道在ul标签中有一组li标签，你如何点击每个li并显示相应的内容，最初我的想法是用for循环给每个li添加click事件，然而产生了闭包的效果，为了解决这个问题，我又对代码进行了下面的更改。 <ul> <li>1</li> <li>2</li> <li>3</li> ...
给动态生成<li>标签绑定事件
chie2783的博客
11-09 416
如下代码，页面初始的li倒是可以成功加载上，那之后动态添加的dom却没有onclick事件，需要对生成的li再次定义onclick，这样就显得很麻烦，那么时间委托就可以解决这个问题。 <!DOCTYPE html> <html> <head> <...
li标签绑定事件
刘小飞
03-09 4217
关于在前端面试中，经常会被技术人员问道在ul标签中有一组li标签，你如何点击每个li并显示相应的内容，最初我的想法是用for循环给每个li添加click事件，然而产生了闭包的效果，为了解决这个问题，我又对代码进行了下面的更改。 ul> li>1li> li>2li> li>3li> li>4li> ul> script type="text/javascript"> var li
使用原生 js 给连续多个 li 绑定点击事件，输出每条 li 的下标（索引）的几种方式
17902的博客
08-25 2940
html： <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul> 方法一：通过设置属性方式给每一条 li 设置属性
【JS】Day13
CSDN博客
11-09 365
【课堂笔记】Day13
点击li标签获取该标签的内容
hzp666的博客
02-21 3247
对Ul下的li标签执行点击事件——如何获取你所点击的标签 问题所来：做项目时，一般的数据都是用循环动态加载出来的，结构都是一样的，只是绑定的值不同，如何对相同的标签做处理的问题就来了。 例如：点谁就显示谁的数值  1  2   3   4   错误：这种做法永远只能取到第一个 $("#test").click(function(){    alert($
点击li标签弹出对应的内容
Sun_blog
08-23 1446
题目：点击li标签，在控制台输出对应的内容 DOM结构 <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 方法一：批量绑定点击事件 //获取dom var list = document.getElementById
JS中for循环出现的问题：如何给li元素绑定事件，点击每个li元素弹出对应的
骆小胖~
12-02 2738
JS中for循环出现的问题：如何给li元素绑定事件，点击每个li元素弹出对应的索引？
热门推荐
clh386的博客
11-17 1万+
刚开始遇到一个问题就是我在HTML中写了四个< li >标签，想给每个li 绑定一个点击事件，通过点击每个li ,弹出它对应的索引，刚开始是这么做的：<html> <head> <title>无标题文档</title> <script type="text/javascript"> window.onload=function(){ var li=document.getElementsByTagN
js循环给li绑定事件实现 点击li弹出其索引值 和内容
WangJiangNan17214的博客
02-14 3823
html代码   　　香蕉 　　苹果      菠萝 　　猕猴桃 　　芒果   方法一:    var itemli = document.getElementsByTagName("li");    for(var i = 0; i 　　　　itemli[i].index = i; //给每个li定义一个属性索引值，赋
li标签动态绑定点击事件
06-08
上面的代码中，首先通过 `document.getElementsByTagName("li")` 获取到页面中所有的 li 标签，然后使用 `for` 循环遍历每个 li 标签，为它们动态绑定点击事件。在点击事件的回调函数中，可以编写点击 li 标签后的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值