JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值
先看下面一段代码:
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的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值的更多相关文章
- for循环中嵌套setTimeout,执行顺序和结果该如何理解?
这两天在捣鼓作用域的问题,有的时候知识这个东西真的有点像是牵一发而动全身的感觉.在理解作用域的时候,又看到了一道经典的面试题和例子题. 那就是在for循环中嵌套setTimeout延时,想想之前面试的 ...
- 如何处理ajax中嵌套一个ajax
在做项目的时候 遇到过第二次了 当我第二次去问'公子'的时候 被吐槽了 原来我以前遇到过 只是忘记了...他老人家竟然还记得... ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会 ...
- .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
林德熙 小伙伴希望保存一个文件,并且希望如果出错了也要不断地重试.然而我认为如果一直错误则应该对外抛出异常让调用者知道为什么会一直错误. 这似乎是一个矛盾的要求.然而最终我想到了一个办法:让重试一直进 ...
- Java循环中删除一个列表元素
本文主要想讲述一下我对之前看到一篇文章的说法.假设跟你的想法有出入,欢迎留言.一起讨论. #3. 在循环中删除一个列表元素 考虑以下的代码.迭代过程中删除元素: ArrayList<String ...
- for循环中嵌套异步请求问题
for循环中嵌套了异步请求会导致顺序错乱,用递归代替for循环,可以保证正常执行顺序:
- JS函数 编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数。
编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...
- python练习题,写一个方法 传进去列表和预期的value 求出所有变量得取值可能性(例如list为[1,2,3,4,5,6,12,19],value为20,结果是19+1==20只有一种可能性),要求时间复杂度为O(n)
题目:(来自光荣之路老师)a+b==valuea+b+c=valuea+b+c+d==valuea+b+c+d+...=valuea和b....取值范围都在0-value写一个方法 传进去列表和预期得 ...
- ajax使用中发现的问题与深入扩展(for循环中嵌套ajax)
在学习ajax的过程中,我曾经遇到过这样的一个问题,为了得到一个详情列表,我要先向服务器去请求得到索引表,简单描述就是ajax中的success中的for循环中再次嵌套了ajax,结果第二层succe ...
- JS中For循环中嵌套setTimeout()方法的执行顺序
在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...
随机推荐
- python 爬照片 模拟浏览器 先登录账号
# -*- coding: utf-8 -*-"""Created on Mon Mar 7 10:53:40 2016 @author: root"" ...
- mark笔记
1.[cocos2dx]ccnode跟ccui节点混用时注意touch层级问题,基本不可控
- Delphi总结使用TStrings的一些技巧
[delphi] view plaincopyprint? 先把要讨论的几个属性列出来: 1.CommaText 2.Delimiter & DelimitedText 3.Names &am ...
- MySQL服务器的线程数查看方法
mysql重启命令:/etc/init.d/mysql restart MySQL服务器的线程数需要在一个合理的范围之内,这样才能保证MySQL服务器健康平稳地运行.Threads_created表示 ...
- --@angularJS--指令与控制器之间较复杂的交互demo2
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>c ...
- Flex中escape/encodeURI/encodeURIComponent的区别
Flex中提供了三种转码函数,各有各的区别, escape,encodeURI,encodeURIComponent 这三个函数不仅在flex中有道运用在javascript中同样的含义 ,今天我仔细 ...
- jQ小图标上下滑动特效
嗯,又到了,夜静饥寒的时候,手指颤抖,回望去,屋内满是寂静,寥寥绰影,咳咳咳,想我程序员之路还没到终点...就...咳咳咳 好了日常神经结束,还要涂我的唇膏.还剩下,最后一章,js动画(四),明天放上 ...
- loadrunner controller:设置多个load generator
下面讲一下如何使用多台电脑进行负载测试. 1) 打开load generator,如图所示默认已添加了我们本地的Generator: 2) 点击"Add. ...
- CentOS 6一键系统优化 Shell 脚本
CentOS 6一键系统优化 Shell 脚本 脚本的内容如下: #!/bin/bash#author suzezhi#this script is only for CentOS 6#check t ...
- 【js编程艺术】小制作五
1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...