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计算页面执行时间的函数
Dec 07 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
PHP读取目录下所有文件的代码
2008/01/07 PHP
php 购物车的例子
2009/05/04 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
详解Python中的循环语句的用法
2015/04/09 Python
Python运算符重载用法实例
2015/05/28 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python如何基于redis实现ip代理池
2020/01/17 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
社区工作者先进事迹
2014/01/18 职场文书
对孩子的寄语
2014/04/09 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python