JavaScript给每一个li节点绑定点击事件的实现方法
2016-12-01 15:20
691 查看
1.单击事件
<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>
2.双击事件
<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>
PS:下面看下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节点绑定点击事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- JavaScript给每一个li节点绑定点击事件
- JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
- JavaScript实现LI列表数据绑定的方法
- jQuery实现按钮只点击一次后就取消点击事件绑定的方法
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
- JavaScript实现为事件句柄绑定监听函数的方法分析
- JavaScript给按钮绑定点击事件(onclick)的方法
- JavaScript实现LI列表数据绑定的方法
- jQuery实现按钮只点击一次后就取消点击事件绑定的方法
- Javascript 中的 绑定事件方法
- 用live()方法给新增节点绑定事件
- JavaScript调用Activex控件的事件的实现方法
- JavaScript调用Activex控件的事件的实现方法
- JavaScript事件绑定的方法说明
- DataGrid中绑定javascript事件,实现删除提示和变换背景色
- javascript 冒泡 解决过多节点绑定事件的问题
- Javascript动态绑定事件的简单实现代码
- JavaScript中绑定事件监听函数的通用方法 addEvent() [转]