Javascript动态绑定事件的简单实现代码
2023-06-13 09:14:26 时间
下面是页面的dom结构
复制代码代码如下:
<ulid="test">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
下面是javascript代码
//根据ID获取对象
functionid(v){returndocument.getElementById(v);}
//根据标记获取对象
functiontag(element,t){returnelement.getElementsByTagName(t);}
window.onload=function(){
//获取test下的所有li对象
varli=tag(id("test"),"li");
//用循环绑定鼠标单击事件
for(vari=0;i<li.length;i++){
li[i].onclick=function(){
//期望弹出1,2,3,4
//结果弹出的总是5
alert("你点击了第"+(i+1)+"项");
}
}
}
为什么会出现上边的现像呢?原因是“for中的事件绑定并没有马上得到执行”。修改后的代码如下:
//根据ID获取对象
functionid(v){returndocument.getElementById(v);}
//根据标记获取对象
functiontag(element,t){returnelement.getElementsByTagName(t);}
window.onload=function(){
//获取test下的所有li对象
varli=tag(id("test"),"li");
//用循环绑定鼠标单击事件
for(vari=0;i<li.length;i++){
(function(){
vart=i
li[i].onclick=function(){
alert("你点击了第"+t+"项");
}
})();
}
}
测试代码,一切OK,我们正常的将循环变量i传到onclick事件对应的处理函数中。
相关文章
- 3种JavaScript 对象转数组的方法
- javascript 隐式转换_mysql隐式转换
- JavaScript事件流
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- JavaScript学习总结(十六)——Javascript闭包(Closure)详解编程语言
- javascript之卸载鼠标事件的代码
- javascript下给元素添加事件的方法与代码
- javascript键盘事件全面控制脚本代码
- javascript动态添加事件代码
- javascript事件加载与预加载
- javascript精确获取样式属性(上)
- JavaScript判断判断某个对象是Object还是一个Array
- javascript下4个跨浏览器必备的函数
- javascript删除dom对象的事件函数代码
- javascript事件对象坐标事件说明
- 动态加载外部javascript文件的函数代码分享
- 关于JavaScript与HTML的交互事件
- JavaScript获取onclick、onchange等事件值的代码
- 分享JavaScript获取网页关闭与取消关闭的事件
- JavaScript中的函数的两种定义方式和函数变量赋值
- JavaScript实现的内存数据库LokiJS介绍和入门实例
- javascript进行四舍五入方法汇总
- JavaScript监听和禁用浏览器回车事件实例