JavaScript给每一个li节点绑定点击事件的实现方法


Posted in Javascript onDecember 01, 2016

 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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
JQuery学习总结【一】
Dec 01 #Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 #Javascript
You might like
xajax写的留言本
2006/11/25 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
python 网络编程详解及简单实例
2017/04/25 Python
python实现多张图片拼接成大图
2019/01/15 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
Python如何实现动态数组
2019/11/02 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
实习证明模板
2015/06/16 职场文书
《风筝》教学反思
2016/02/23 职场文书