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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
JS实现放烟花效果
2020/03/10 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python处理RSTP视频流过程解析
2020/01/11 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
初中音乐教学反思
2014/01/12 职场文书
新年主持词
2014/03/27 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
2016新年感言
2015/08/03 职场文书
关于车尾的标语大全
2015/08/11 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL