实现点击列表弹出列表索引的两种方式


Posted in Javascript onMarch 08, 2013

方式一,使用利用事件冒泡委托给列表的父节点去处理的方式

var ulObj = document.getElementById("myUl"); 
ulObj.onclick = function (event) { 
var tg = event.target; 
var liArray = ulObj.getElementsByTagName("li"); 
for (var i = 0; i < liArray.length; i++) { 
if (liArray[i] === tg) { 
alert(i + 1); 
} 
} 
}

方式二,使用闭包
var liArray = document.getElementById("myUl").getElementsByTagName("li"); 
for (var i = 0; i < liArray.length; i++) { 
(function () { 
var n = i; 
liArray[i].onclick = function () { 
alert(n + 1); 
} 
})(i) 
}

HTML代码
<ul id='myUl'> 
<li>haha</li> 
<li>heihei</li> 
<li>hehe</li> 
<li>gaga</li> 
</ul>
Javascript 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
javascript事件处理模型实例说明
May 31 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
解决Nuxt使用axios跨域问题
Jul 06 Javascript
很好用的js日历算法详细代码
Mar 07 #Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 #Javascript
JS链式调用的实现方法
Mar 07 #Javascript
jQuery滚动加载图片效果的实现
Mar 06 #Javascript
HTML上传控件取消选择
Mar 06 #Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 #Javascript
JQuery操作tr和td内容的方法实例
Mar 06 #Javascript
You might like
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python新手如何理解循环加载模块
2020/05/29 Python
应届生.NET方向面试题
2015/05/23 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
基层干部十八大感言
2014/01/19 职场文书
会计学自我鉴定
2014/02/06 职场文书
2015年人事科工作总结
2015/04/28 职场文书
外科护士长工作总结
2015/08/12 职场文书
全新239军机修复记
2022/04/05 无线电