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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 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 cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
心得体会格式及范文
2016/01/25 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android