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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP详细彻底学习Smarty
2008/03/27 PHP
php表单处理操作
2017/11/16 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
python 实现二维列表转置
2019/12/02 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
工程造价自荐信
2013/10/09 职场文书
拓展培训心得体会
2014/01/04 职场文书
秋季运动会稿件
2014/01/30 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
2014年元旦感言
2014/03/06 职场文书
留学推荐信英文范文
2015/03/26 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js