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实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
js实现烟花特效
Mar 02 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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
php二维数组排序详解
2013/11/06 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python实现BackPropagation算法
2017/12/14 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python中time包实例详解
2021/02/02 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
实习自我鉴定范文
2013/10/30 职场文书
工作睡觉检讨书
2014/02/25 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
趵突泉导游词
2015/02/03 职场文书
关于倡议书的范文
2015/04/29 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python