在所有的面向对象编程语言中,只要涉及到逻辑的代码,常见的问题都是循环创建很多个对象UI,在循环体中对这些对象添加事件。如果不做处理,和其他地方一样的添加事件,其结果都是只响应最后一次循环之后的结果。原因就是这些事件虽然在循环体中创建,但是循环会在瞬间完成,事件还要等到触发才能执行,所以执行的时候,所有变量就都是最后一次循环产生的变量。

  每种语言对此的处理方式几乎都是要在循环的时候给事件绑定上当前创建的对象,只是语言规范上稍有初入。最近使用js做几个页面,所以留下js的处理方式。

我在js中循环创建了很多div,每个div中都有一个input按钮。这个input按钮点击时候触发其对应的所有div的标题信息。循环或者类中的代码如下:

         (function(obj,title){
obj.onclick=function(){
alert(title);
}
})(input,this.title);

将input对象传入绑定到事件,才可以在每次事件触发的时候不会找到最后一次循环的对象

javascript循环事件只响应最后一次的问题处理的更多相关文章

  1. JavaScript onkeydown事件入门实例(键盘某个按键被按下)

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  2. [译] JavaScript 的事件循环

    译者注 本译文基本是按原文的意思来翻译,但对于 JavaScript 的事件循环,个人感觉还是 Philip Roberts 的视频讲解更形象些,思路和本文大致相同,不过他把事件表理解为 Web AP ...

  3. 对javascript EventLoop事件循环机制不一样的理解

    前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...

  4. JavaScript的事件循环机制浅析

    前言 JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作. 类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等. 概念 在 ...

  5. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  6. 浅谈JavaScript的事件(事件处理程序)

    事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...

  7. javascript 的 事件类型(事件)

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...

  8. JavaScript 浏览器事件解读

    1. 事件基本概念 事件是指在文档或者浏览器中发生的一些特定交互瞬间,比如打开某一个网页,浏览器加载完成后会触发 load 事件,当鼠标悬浮于某一个元素上时会触发 hover 事件,当鼠标点击某一个元 ...

  9. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

随机推荐

  1. AssociatedObject关联对象原理实现

    介绍 关联对象(AssociatedObject)是Objective-C 2.0运行时的一个特性,允许开发者对已经存在的类在扩展中添加自定义的属性.在实际生产过程中,比较常用的方式是给分类(Cate ...

  2. [T-ARA/超新星][TTL (Time To Love)]

    歌词来源:http://music.163.com/#/song?id=5403002 作曲 : 金道勋 [作曲 : 金道勋] 作词 : Rhymer/Joosuc/황성진 [作词 : Rhymer/ ...

  3. 随手记录-linux-常用命令

    转自:https://www.cnblogs.com/yjd_hycf_space/p/7730690.html linux目录结构:http://www.cnblogs.com/fat39/p/72 ...

  4. 安装Visual studio 2013并进行单元测试

    刚开始在没有老师的指导下自己弄了一个简单的单元测试,最后与老师的对比发现错误百出,于是另起一篇.安装VS2013没有什么问题,安装过程如下图: 接下来别开始练习书上的单元测试. 先是简单的创建C#的类 ...

  5. 增加ubuntu的内存——设置Swap增加内存

    1.查看一下当前Swap分区的状态: $cat /proc/meminfo SwapTotal: 0 kB SwapFree: 0 kB 如果上面二项目都为0,说明没有Swap分区:如果不为0,则说明 ...

  6. 【贪心算法】POJ-1328 区间问题

    一.题目 Description Assume the coasting is an infinite straight line. Land is in one side of coasting, ...

  7. asp.net如何隐藏表格(table)的一行

    直接用jquery $("#id1").click(function(){ $("#trId").css("display""no ...

  8. 【区间DP】codevs3657 括号序列题解

    题目描述 Description 我们用以下规则定义一个合法的括号序列: (1)空序列是合法的 (2)假如S是一个合法的序列,则 (S) 和[S]都是合法的 (3)假如A 和 B 都是合法的,那么AB ...

  9. TCP系列53—拥塞控制—16、Destination Metrics和Congestion Manager

    一.概述 我们之前介绍过rtt.ssthresh等变量,这些变量一般在TCP连接建立的时候有个初始值,然后随着TCP的数据交互逐渐调整到适应对应的网络状态的值.但是如果每次TCP建立连接都依靠默认初始 ...

  10. AWS EC2安装docker时的问题

    在AWS EC2的实例(Ubuntu)里面安装docker时,使用通常的安装步骤 :~$ sudo apt-get update :~$ sudo apt-get install docker 安装完 ...