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


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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
vue的for循环使用方法
Feb 12 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
很好用的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
php实现TCP端口检测的方法
2015/04/01 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PDO::commit讲解
2019/01/27 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
JSONP基础知识详解
2017/03/19 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python端口扫描简单程序
2016/11/10 Python
python中的随机函数小结
2018/01/27 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python实现自动登录
2018/09/17 Python
python实现PID算法及测试的例子
2019/08/08 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
什么是类的返射机制
2016/02/06 面试题
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
七年级生物教学反思
2016/02/20 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
ubuntu下常用apt命令介绍
2022/06/05 Servers