Javascript动态绑定事件的简单实现代码
更新时间：2010年12月25日 22:37:55 作者：
Javascript事件绑定的方法很多，很灵活。不过，作为比较简单的动态绑定，下面的代码看似正确，但得不到预期的效果。
下面是页面的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事件对应的处理函数中。
复制代码 代码如下:
<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事件对应的处理函数中。
相关文章
这篇文章主要介绍了JS模板编译的实现详情，编译是一种格式变成另一种格式的过程。编译会导致好的结果，比如书写简单的代码，编译出来复杂的代码；或者提高代码的使用性能2022-07-07
这篇文章主要为大家介绍了以fetch为例详解如何消除js异步的传染性示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
今天小编就为大家分享一篇layui 富文本赋值，取值，取纯文本值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
JavaScript中json数组查找数据的几种方式(含模糊查找)
这篇文章主要给大家介绍了关于JavaScript中json数组查找数据的几种方式,文中包括模糊查找,文中给出了详细的代码示例,对大家学习或者使用json具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
在JavaScript中,我们可以实现灯光闪烁效果,本文主要用到了 setInterval 和 clearInterval 两个重要方法,感兴趣的小伙伴可以了解一下2025-02-02
兼容ie、firefox的图片自动缩放的css跟js代码分享
最近编辑反应，图片有时候太大了，如果隐藏了，可能部分内容别人就看不到了，如果手工设置图片大小又太麻烦了，这里就提供一个方法让也没的图片等比例缩放2013-08-08
在JavaScript中自定义事件的用法是前端开发中一个较为高级的话题,它允许开发者创建和触发自己的事件,从而达到更好的模块化和代码解耦,这篇文章主要介绍了JavaScript中自定义事件的相关资料,需要的朋友可以参考下2025-04-04
要在 JavaScript 中实现一个按照贝塞尔曲线运动的小球,关键是要掌握贝塞尔公式的基本原理和实现方式,以及使用 JavaScript 处理动画和物理运算,感兴趣的小伙伴跟着小编一起来看看吧2024-10-10
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
js中将HTMLCollection/NodeList/伪数组转换成数组的代码，需要的朋友可以参考下。2011-07-07
这篇文章主要介绍了JavaScript实现数字数组正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
最新评论