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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
JavaScript实例 ODO List分析
Jan 22 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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php中执行系统命令的方法
2015/03/21 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
javascript 节点排序 2
2011/01/31 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python编程之多态用法实例详解
2015/05/19 Python
python3音乐播放器简单实现代码
2020/04/20 Python
python3 flask实现文件上传功能
2020/03/20 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
Python 如何在字符串中插入变量
2020/08/01 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
工程招投标邀请书
2014/01/26 职场文书
火车的故事教学反思
2014/02/11 职场文书
初三班主任寄语大全
2014/04/04 职场文书
业务内勤岗位职责
2014/04/30 职场文书
群教班子对照检查材料
2014/08/26 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
患者身份识别制度
2015/08/06 职场文书