JavaScript的for循环中嵌套一个点击事件的问题解决


Posted in Javascript onMarch 03, 2017

先看下面一段代码:

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循环等多个知识点。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 页面全选框实践代码
Apr 02 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
node.js操作mysql简单实例
May 25 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 #Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 #Javascript
JavaScript数组迭代方法
Mar 03 #Javascript
vue.js的提示组件
Mar 02 #Javascript
js实现功能比较全面的全选和多选
Mar 02 #Javascript
jQuery实现三级联动效果
Mar 02 #Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php中adodbzip类实例
2014/12/08 PHP
浅谈php命令行用法
2015/02/04 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
python多线程操作实例
2014/11/21 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Python如何将装饰器定义为类
2020/07/30 Python
校友会欢迎辞
2014/01/13 职场文书
六查六看自查材料
2014/02/17 职场文书
艾滋病宣传标语
2014/06/25 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
教师职位说明书
2014/07/29 职场文书
捐款仪式主持词
2015/07/04 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书