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 26 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 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/16 PHP
php中explode与split的区别介绍
2012/10/03 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python Series从0开始索引的方法
2018/11/06 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
实习评语
2013/12/16 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
绿里奇迹观后感
2015/06/15 职场文书
大学生军训感言
2015/08/01 职场文书
python用字节处理文件实例讲解
2021/04/13 Python