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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
在node中如何使用 ES6
Apr 22 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
华为python面试题
2016/05/03 面试题
JSF界面控制层技术
2013/06/17 面试题
花卉与景观设计系大学生求职信
2013/10/01 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js
volatile保证可见性及重排序方法
2022/08/05 Java/Android