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 相关文章推荐
jQuery 自定义函数写法分享
Mar 30 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
layui table 参数设置方法
Aug 14 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
基于axios 的responseType类型的设置方法
Oct 29 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
在Python中处理XML的教程
2015/04/29 Python
Python 装饰器使用详解
2017/07/29 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
美国滑板店:Tactics
2020/11/08 全球购物
this关键字的作用
2016/01/30 面试题
副总经理工作职责
2013/11/28 职场文书
证婚人经典证婚词
2014/01/09 职场文书
思想政治表现评语
2015/01/04 职场文书
网吧管理制度范本
2015/08/05 职场文书
导游词之山东红叶谷
2019/10/31 职场文书