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 相关文章推荐
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
详解Bootstrap插件
Apr 25 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
js实现tab切换效果
Feb 16 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
react antd实现动态增减表单
Jun 03 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
浅谈ThinkPHP的URL重写
2014/11/25 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
在Python中使用模块的教程
2015/04/27 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python判断有效的数独算法示例
2019/02/23 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
opencv python图像梯度实例详解
2020/02/04 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
物业接待员岗位职责
2015/04/15 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
如何在Python项目中引入日志
2021/05/31 Python
正则表达式基础与常用验证表达式
2022/06/16 Javascript