JavaScript中为所有li节点绑定点击与双击事件的实现
作者:小圆点时间:2026-10-31 04:06:49浏览:598
本文介绍在JavaScript中如何获取页面中所有的li节点,并通过循环为每个节点分别绑定单击和双击事件。示例代码展示了如何触发事件时获取当前节点内容并修改样式,同时讲解了如何在循环中通过闭包机制确保每个li绑定不同参数的问题。
JavaScript中li节点的单击与双击事件绑定
首先介绍JavaScript中的单击事件。
<body>
<h2>javascript 事件</h2>
<ul>
<li>aaaa</li>
<li>aaaa111</li>
<li>aaaa222</li>
<li>aaaa3333</li>
<li>aaaa444</li>
</ul>
<script type="text/javascript">
//获取所有li的节点
var list = document.getElementsByTagName("li");
//给每个li绑定事件
for(var i = 0;i<list.length;i++){
list[i].onclick = function(){
//弹出对应的li节点里面的内容
alert(this.innerHTML);
//将节点的颜色变成红色
this.style.color = "red";
}
}
</script>
</body>
接着介绍JavaScript中的双击事件。
<body>
<h2>javascript 事件</h2>
<ul>
<li>aaaa</li>
<li>aaaa111</li>
<li>aaaa222</li>
<li>aaaa3333</li>
<li>aaaa444</li>
</ul>
<script type="text/javascript">
//获取所有li的节点
var list = document.getElementsByTagName("li");
//给每个li绑定事件
for(var i = 0;i<list.length;i++){
list[i].ondblclick = function(){
//弹出对应的li节点里面的内容
alert(this.innerHTML);
this.style.color = "red";
}
}
</script>
</body>
补充说明:下面演示如何使用JS循环为每个li节点绑定带有不同参数的点击事件。
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
var li=document.getElementsByTagName_r("li");
for(var i=0;i<li.length;i++){
(function(x){
li[x].onclick=function(){alert(x);}
})(i);
}
</script>
确保每个li节点弹出的值都是不同的。
以上介绍的是JavaScript中为每个li节点绑定点击事件的方法,希望能对大家有所帮助。如果有任何疑问,欢迎留言,小编会及时回复。在此感谢大家对本站的支持!
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
