Javascript动态绑定事件的简单实现代码


Posted in Javascript onDecember 25, 2010

下面是页面的dom结构

<ul id="test"> 
<li>One</li> 
<li>Two</li> 
<li>Three</li> 
<li>Four</li> 
</ul>

下面是javascript代码
//根据ID获取对象 
function id(v) { return document.getElementById(v); } //根据标记获取对象 
function tag(element, t) { return element.getElementsByTagName(t); } 
window.onload = function() { 
//获取test下的所有li对象 
var li = tag(id("test"), "li"); 
//用循环绑定鼠标单击事件 
for(var i=0; i<li.length; i++) { 
li[i].onclick = function() { 
//期望弹出1,2,3,4 
//结果弹出的总是5 
alert("你点击了第" + (i+1) + "项"); 
} 
} 
}

为什么会出现上边的现像呢?原因是“for中的事件绑定并没有马上得到执行”。修改后的代码如下:
//根据ID获取对象 
function id(v) { return document.getElementById(v); } //根据标记获取对象 
function tag(element, t) { return element.getElementsByTagName(t); } 
window.onload = function() { 
//获取test下的所有li对象 
var li = tag(id("test"), "li"); 
//用循环绑定鼠标单击事件 
for(var i=0; i<li.length; i++) { 
(function() { 
var t = i 
li[i].onclick = function() { 
alert("你点击了第" + t + "项"); 
} 
})(); 
} 
}

测试代码,一切OK,我们正常的将循环变量i传到onclick事件对应的处理函数中。
Javascript 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
jquery自适应布局的简单实例
May 28 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
浅析javascript闭包 实例分析
Dec 25 #Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 #Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 #Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 #Javascript
JQuery live函数
Dec 24 #Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 #Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 #Javascript
You might like
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python类属性与实例属性用法分析
2015/05/09 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python学习小技巧总结
2018/06/10 Python
django 自定义过滤器的实现
2019/02/26 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python中Yield的基本用法
2020/10/18 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
初二生物教学反思
2014/02/03 职场文书
大学班级学风建设方案
2014/05/01 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
学历证明样本
2015/06/16 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS