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遍历checkbox获取选中项value值的方法
Feb 13 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
小程序实现搜索框
Jun 19 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 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
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
laravel学习教程之关联模型
2016/07/30 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python单元测试与测试用例简析
2019/11/09 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Python基于execjs运行js过程解析
2020/11/27 Python
行政文员岗位职责
2013/11/08 职场文书
小学数学国培感言
2014/03/10 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python