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

最新推荐文章于 2023-09-01 10:33:00 发布

weixin_45846980

最新推荐文章于 2023-09-01 10:33:00 发布

阅读量901

点赞数 1

文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45846980/article/details/108435498

版权

博客探讨了在JavaScript中如何避免为大量li标签逐一绑定事件，以提高性能并减少内存占用。通过事件代理（Event Delegation）利用事件冒泡机制，只需在父元素上绑定一次事件，即可处理所有子元素的事件。这种方法不仅节省了内存，还能应对动态内容的事件绑定问题，但需注意可能存在的事件误判风险。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<ul>
 
<li>1</li>
 
<li>2</li>
 
<li>3</li>
 
<li>4</li>
 
</ul>
 
<scripttype="text/javascript">
 
var li=document.getElementsByTagName("li");
 
for(var i=0;i<li.length;i++){
(function(x){
li[x].οnclick=function(){
alert(x);
}
})(i);
}
</script>

可以看出虽然解决闭包带来。如果有1000个li标签，难道还要循环个1000遍，这样肯定不行所以利用事件冒泡特性提高效率。主要是利用事件代理。

事件代理（Event Delegation）

又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

event.target 属性可以用来实现事件委托 (event delegation)。

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处自然是提高性能。

<script type="text/javascript"> 
var ulItem = document.getElementByTagName("ul")[0];
ulItem.onclick = function(e){
e = e || window.event;//这一行及下一行是为兼容IE8及以下版本
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase() === "li"){
alert(target.innerHTML);
}
}
</script>