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

最新推荐文章于 2023-09-14 09:30:41 发布

小小飞肖

最新推荐文章于 2023-09-14 09:30:41 发布

阅读量1.7k

点赞数

分类专栏： js常用操作

本文链接：https://blog.csdn.net/qq_32766999/article/details/100734531

版权

js常用操作专栏收录该内容

38 篇文章 0 订阅

订阅专栏

关于在前端面试中，经常会被技术人员问道在ul标签中有一组li标签，你如何点击每个li并显示相应的内容，最初我的想法是用for循环给每个li添加click事件，然而产生了闭包的效果，为了解决这个问题，我又对代码进行了下面的更改。

<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)。

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

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

好处呢：1，提高性能。

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>事件委托</title>
</head>
<body>
<div>
<ul id="ulItem">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
<li id="li5">5</li>
<li id="li6">6</li>
<li id="li7">7</li>
<li id="li8">8</li>
<li id="li9">9</li>
<li id="li10">10</li>
</ul>
</div>
<script type="text/javascript"> 
var ulItem = document.getElementById("ulItem");
ulItem.onclick = function(e){
e = e || window.event;//这一行及下一行是为兼容IE8及以下版本
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase() === "li"){
alert(target.innerHTML);
}
}
</script> 
</body>
</html>

小小飞肖

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
li标签绑定事件比如有1000个li标签需要点击，显示对应li标签的内容，有什么高效的方法

关于在前端面试中，经常会被技术人员问道在ul标签中有一组li标签，你如何点击每个li并显示相应的内容，最初我的想法是用for循环给每个li添加click事件，然而产生了闭包的效果，为了解决这个问题，我又对代码进行了下面的更改。<ul><li>1</li><li>2</li><li>3</li>...
复制链接

扫一扫