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 new Date() 出现NaN 的分析
Oct 23 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python实现多并发访问网站功能示例
2017/06/19 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
房产委托公证书
2014/04/08 职场文书
政风行风评议整改方案
2014/09/15 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
商标侵权律师函
2015/05/27 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python