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中的array数组使用技巧
Jan 31 Javascript
JavaScript 语言的递归编程
May 18 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
浅谈javascript错误处理
Aug 11 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
使用js获取图片原始尺寸
2014/12/03 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python实现简单神经网络算法
2018/03/10 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
.NET笔试题(20个问题)
2016/02/02 面试题
企业内控岗位的职责
2014/02/07 职场文书
关爱残疾人标语
2014/06/25 职场文书
责任书范本
2014/08/25 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
参加招聘会后的感想
2015/08/10 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书