JavaScript的for循环中嵌套一个点击事件的问题解决
作者:陌年古城 时间:2024-04-22 13:01:49
先看下面一段代码:
for(var i=0; i<10; i++) {
$('#ul').bind('click', function() {
alert(i)
})
}
对于这段代码,当点击Id为“ul”的元素时,会出现弹出10个10。为什么会弹出10个10呢?
首先,这段代码中的点击事件不是绑定事件,是jQuery的绑定事件,那么绑定事件和普通事件是有区别的。普通事件中,如果对某一个元素添加多个点击事件,那么,最后一个将会把前面的所有点击事件全部覆盖,只能执行最后一个点击事件;而在绑定事件中,则不一样,在同一个元素上,即使绑定再多的点击事件,都会全部执行。也就是说,普通事件中的onclick只支持单个事件,会被其他onclick事件覆盖,而事件绑定中的点击事件可以添加多个事件而不用担心被覆盖。那么,可想而知,当点击Id为“ul”的元素时,一定会弹出10个弹窗。
如果还是不太明白,那么对代码进行变形之后,就很容易理解了。
其实,上面的那段代码可以变形为以下形式:
// i=0时
$('#ul').bind('click', function() {
alert(i)
})
// i=1时
$('#ul').bind('click', function() {
alert(i)
})
......
// i=10时
$('#ul').bind('click', function() {
alert(i)
})
扩展:下面这段代码是对上面的那段原始代码的比较,进一步说明普通事件和事件绑定的区别
for(var i=0; i<10; i++) {
document.getElementById('ul').onclick = function() {
alert(i)
}
}
运行结果:弹出一个10
很显然,当触发点击事件时,会弹出10个弹窗。那么,可能又会有疑问?为什么会是10个10呢?不应该是0,1,2,3...10吗?为了解决这个疑惑,可对原始代码进行再次变形:
var i=0
$('#ul').bind('click', function() {
alert(i)
})
i=1
$('#ul').bind('click', function() {
alert(i)
})
......
i = 9
$('#ul').bind('click', function() {
alert(i)
})
原始代码,变形为这样之后,很显然,最终i的值是9,但是根据for循环的原理,在循环到i为9之后,会执行i++,之后再去判断i<10,此时已不满足条件,所以终止循环,最终i值为10。那么自然也就明白,为什么最终结果是10个结果为10的弹窗。
总结:这段代码看似简单,却涵盖了事件绑定、普通事件、for循环等多个知识点。
来源:http://www.cnblogs.com/webhome/p/6491872.html
标签:js,点击事件
0
投稿
猜你喜欢
python解决OpenCV在读取显示图片的时候闪退的问题
2022-04-16 16:29:48
python读取图片的方式,以及将图片以三维数组的形式输出方法
2023-08-05 04:09:26
用python建立两个Y轴的XY曲线图方法
2023-06-30 15:01:26
在pycharm中创建django项目的示例代码
2023-04-07 17:39:25
Oracle使用PL/SQL操作COM对象
2010-07-21 12:56:00
Python数据结构树与算法分析
2023-10-10 19:30:18
利用python3如何给数据添加高斯噪声
2023-06-11 20:52:17
Python流行ORM框架sqlalchemy的简单使用
2023-05-23 09:31:15
解析:轻松了解 MySQL中损坏的MyISAM表
2009-02-23 17:30:00
python实现查找两个字符串中相同字符并输出的方法
2023-09-01 04:03:42
MYSQL初学者命令行使用指南
2024-01-15 08:46:33
MySQL如何通过Navicat实现远程连接
2024-01-13 23:07:07
分享15个最受欢迎的Python开源框架
2021-06-22 12:17:08
mysql 5.7.23 winx64解压版安装教程
2024-01-26 01:41:09
asp是的日期转换为星座的函数
2011-02-26 11:11:00
python Tkinter版学生管理系统
2021-03-11 11:07:48
mysql 获取规定时间段内的统计数据
2024-01-24 11:25:10
Python+LyScript实现自定义反汇编
2021-02-07 11:57:47
iis7 ASP+Access数据库连接错误
2011-03-08 10:41:00
MySQL Order By索引优化方法
2024-01-18 10:34:38