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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
Vue脚手架编写试卷页面功能
Mar 17 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
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP7修改的函数
2021/03/09 PHP
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
vue中组件的3种使用方式详解
2019/03/23 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python常用库推荐
2016/12/04 Python
有关Python的22个编程技巧
2018/08/29 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python 学习教程之networkx
2019/04/15 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
CAD实训总结范文
2015/08/03 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js