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 08 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
聊聊JavaScript如何实现继承及特点
Apr 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 flush()与ob_flush()的区别详解
2013/06/03 PHP
CI框架常用函数封装实例
2016/11/21 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python 多线程实例详解
2017/03/25 Python
python机器学习之随机森林(七)
2018/03/26 Python
python学习开发mock接口
2019/04/28 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
《悯农》教学反思
2014/04/28 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
Go 语言结构实例分析
2021/07/04 Golang
mysql如何能有效防止删库跑路
2021/10/05 MySQL