先看下面一段代码:

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循环中嵌套一个点击事件为何点击一次弹出多个相同的值的更多相关文章

  1. for循环中嵌套setTimeout,执行顺序和结果该如何理解?

    这两天在捣鼓作用域的问题,有的时候知识这个东西真的有点像是牵一发而动全身的感觉.在理解作用域的时候,又看到了一道经典的面试题和例子题. 那就是在for循环中嵌套setTimeout延时,想想之前面试的 ...

  2. 如何处理ajax中嵌套一个ajax

    在做项目的时候 遇到过第二次了 当我第二次去问'公子'的时候 被吐槽了 原来我以前遇到过 只是忘记了...他老人家竟然还记得... ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会 ...

  3. .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter

    林德熙 小伙伴希望保存一个文件,并且希望如果出错了也要不断地重试.然而我认为如果一直错误则应该对外抛出异常让调用者知道为什么会一直错误. 这似乎是一个矛盾的要求.然而最终我想到了一个办法:让重试一直进 ...

  4. Java循环中删除一个列表元素

    本文主要想讲述一下我对之前看到一篇文章的说法.假设跟你的想法有出入,欢迎留言.一起讨论. #3. 在循环中删除一个列表元素 考虑以下的代码.迭代过程中删除元素: ArrayList<String ...

  5. for循环中嵌套异步请求问题

    for循环中嵌套了异步请求会导致顺序错乱,用递归代替for循环,可以保证正常执行顺序:

  6. JS函数 编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数。

    编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...

  7. 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写一个方法 传进去列表和预期得 ...

  8. ajax使用中发现的问题与深入扩展(for循环中嵌套ajax)

    在学习ajax的过程中,我曾经遇到过这样的一个问题,为了得到一个详情列表,我要先向服务器去请求得到索引表,简单描述就是ajax中的success中的for循环中再次嵌套了ajax,结果第二层succe ...

  9. JS中For循环中嵌套setTimeout()方法的执行顺序

    在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...

随机推荐

  1. Spring Boot Web Executable Demo

    Spring Boot Web Executable Demo */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.sr ...

  2. 如何编写高质量CSS

    虽然写过很多css代码,但每次动手写都让我痛苦不堪,如何组织好那一堆堆的代码,如何提高代码复用率,甚至如何命名类,这些都让我纠结.下面的浅显的谈一谈在看了<编写高质量代码>中的html和c ...

  3. v4l2视频采集摄像头

    v4l2 --是Linux内核中关于视频设备的内核驱动框架,为上层访问底层的视频设备提供了统一的接口./dev/vidioX 1.打开设备文件 fd=open("/dev/video3&qu ...

  4. Delphi TRect函数例子

    {   在网上看到个这个例子感觉还不错,将它移到自己的博客里没事的时候看看:   TRect    作用:保存一个矩形的左上角和右下角的坐标值:      声明:       type TRect = ...

  5. windows下修改apache并发数

    还没有尝试 修改apache的最大连接数,方法如下: 步骤一 先修改 /path/apache/conf/httpd.conf文件. # vi httpd.conf 将“#Include conf/e ...

  6. JavaScript 扯几句单线程相关

    JavaScript 扯几句单线程相关 众所周知,Javascript是单线程执行的,这也就是说:JavaScript在同一个时间上只能处理一件事.他不像C,Java等这些多 线程的,可以开不同的线程 ...

  7. doubango(3)--协议栈的启动过程

    协议栈启动的上层接口 对于Doubango中得sip协议栈,是通过SipStack类粘合上层代码与底层代码的,该类定义在SipStack.h中,实现在SipStack.cxx中.当构造好一个SipSt ...

  8. easyUI parser的使用

    easyUI parser的使用: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. node源码详解 (一)

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource1 本博客同步在https://cnodejs.o ...

  10. requireJS的初步掌握

    前一段时间,因为一些事吧这个习惯落下了,现在争取重新捡起来. 最近开始自学requireJS,为了更好的掌握,所以写出一个自我理解的博客供参考. 分割线------------------------ ...