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节点绑定点击事件的方法,希望能对大家有所帮助。如果有任何疑问,欢迎留言,小编会及时回复。在此感谢大家对本站的支持!

作者最新文章