JavaScript利用闭包循环绑定事件

我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href="#">首页</a> <a href="#">作品</a> <a href="#">文章</a> <a href="#">工具</a> <…

以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click",fn); 原生的话,我们很多会这样写: for(var i=0;i<length;i++){ elem[i].onclick=function(x){return function(){}}(i); } 但是如果,我要连续绑定两个事件呢? for(var i=0;i<length;i+…

JavaScript利用闭包实现模块化

利用闭包的强大威力,但从表面上看,它们似乎与回调无关.下面一起来研究其中最强大的一个:模块. function foo() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.log( something ); } function doAnother() { console.log( another.join( " ! " ) ); } } 正如在这…

javascript：使用代理绑定事件

<ul id="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 普通情况下:通过循环绑定所有 var li=document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].addEventListe…

JavaScript中给onclick绑定事件后return false遇到的问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>IMAGES</h1> <ul> <li> <a href="x_0001.gif" t…

js的一个有意思的小题，闭包解决getElementByTagName的for循环绑定事件错误问题

问: i 会输出什么?改写成闭包的写法? <a href="javaScript:void(0)">a</a> <a href="javaScript:void(0)">b</a> <a href="javaScript:void(0)">c</a> <script type='text/javascript'> var arr = document.getEle…

for循环绑定事件，闭包思想！

1.选项卡问题总结:用alert()测试,是否得到对象. 2.闭包,解决作用域. <script> window.onload=function(){ var li=document.getElementsByTagName('li'); for (var i = 0; i < li.length; i++) { (function(){ var p=i; li[i].onmouseover=function(){ li[p].style.background='#ccc'; } li…

jquery循环绑定事件

<html> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <script type="text/java…

Angularjs 中 ng-repeat 循环绑定事件

用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id}})">删除</span> 其实这样的值是传入不到ng-click里面去的,这里不要用{{}}来包裹,可以这样写 <span class='del' ng-click="RemoveCost(item.Id)">删除</span> 第二种…

javascript闭包传参和事件的循环绑定

今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br><a href="#">link</a> <script> var as = document.getElementsByTagName('a'); for ( var i = as.length; i--; ) { as[i].onclick = funct…

JQuery在循环中绑定事件的问题详解

JQuery在循环中绑定事件的问题详解有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" name="username" id="username_1" value="" /> <input type="text" name="username" id="username_2&quo…

JS中循环绑定遇到的问题及解决方法

本文是原创文章,如需转载,请注明文章出处在工作中,有时会有这样的需求:在一个页面上添加了6个按钮,然后分别为他们绑定点击事件监听器,当点击按钮1时,输出1,当点击按钮2时,输出2. 循环绑定代码如下: for (var i = 1, i <= 6; ++i){ var btn = document.getElementById("btn" + i); btn.addEventListener("click", function(){ console.log(…

JavaScript中闭包实现的私有属性的getter()和setter()方法

注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>闭包</title> </head> <body> <script type="text/javascript"> /** * 利用闭包实现 * 这个函数给对象o增加了属性存储器方法 * 方法名称为ge…

前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器

回调函数.闭包.循环绑定.面向对象.定时器一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callback) { // 函数回调,判断回调函数是否存在 if (callback) callback(data); } func(callback); // 函数回调的本质:在一个函数中(调用函数),当满足一定条件,调用参数函数(回调函数) // 回调函数作为调用函数的参数传入,满足一定的条件,调用回调函数…

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf…

利用闭包解决for循环里onclick事件不能捕捉实时i值问题

问题描述我们都知道,如果我们对于一组元素(相同的标签)同时进行onclick事件处理的时候(在需要获取到索引的时候),一般是写一个for循环,但是onclick是一个异步调用的,所以会带来一个问题,当我们触发这个事件的时候,我们能获取的i值是for完整执行完后i的值,而不能获取到代码顺序里i的值,看一个例子 window.onload = funtion(){ var lis = document.getElementsByTagName('li'); for( var i = 0; i <…

如何给循环中的对象添加事件--深入理解JavaScript的闭包特性

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf…

深入理解JavaScript的闭包特性如何给循环中的对象添加事件(转载)

原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1. <!DOCTYPE HTML> 2.…

JavaScript的闭包特性如何给循环中的对象添加事件（一）

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf-8" /> 5. <title>闭包演示</title> 6. <…

闭包和es6实现循环绑定li输出固定索引值

首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看我们的…

关于在for循环中绑定事件打印变量i是最后一次。

其实函数引用的外部变量都是最后一次的值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:100px; height:100px; background-color:pink; } </style> <…

js的事件循环绑定和jQuery的隐式迭代

js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> js事件循环绑定 var lis = docume…

JS闭包中的循环绑定处理程序

前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件.就是这个问题让我整整调了一个下午.最后还是下班回家,上网查资料才知道怎么解决的. (PS:之前也在<jQuery基础教程>第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来.) 大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的.谢谢! 先贴上错误的例子让大家看看.(例子里面用到jQuery,请导入jQuery库) <!DOCTYPE html PUBLIC "-//W3C/…

由于js词法性质和全局变量被更改，循环绑定的click事件执行时变量和定义时不一致的bug，各种解决方案。

由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该是i的变量应该一直指引的对应的地址,所以一直输出的是5.就是想请教您一下,这种问题应该是怎么样的一个解决思路.您要是有时间的时候帮我看下.非常感谢! 问题: //这个有bug,一直输出5 for (var i =0 ; i<5 ; i++){ var btn = document.createEle…

JavaScript中绑定事件监听函数的通用方法addEvent() 和事件绑定之bindEvent()与 unBindEvent()函数

下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safari.IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期浏览器 obj['o…

JavaScript绑定事件的方法[3种]

在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为: onXXX="JavaScript Code" 其中: onXXX 为事件名称.例如,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouse…

Android自定义工具类获取按钮并绑定事件（利用暴力反射和注解）

Android中为按钮绑定事件的有几种常见方式,你可以在布局文件中为按钮设置id,然后在MainActivity中通过findViewById方法获取按钮对象实例,再通过setOnClickListener为按钮绑定事件,如下所示: //1.获取控件 btn = (Button)findViewById(R.id.button1); //2.绑定事件 btn.setOnClickListener(new OnClickListener() { @Override public void onCl…

javascript绑定事件

本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type',function(){},bool) removeEventListener ('type',function(){},bool) 2)IE事件模型:仅支持事件冒泡 attachEvent('type',function(){}); detachEvent('type',fucntion(){}…

不使用jquery情况下循环添加绑定事件方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .page{border: 1px red solid;} .up{width:300px;height:50px;} .a{width:90px;height:50px;float: left;bo…

JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值

先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击Id为“ul”的元素时,会出现弹出10个10.为什么会弹出10个10呢? 首先,这段代码中的点击事件不是绑定事件,是jQuery的绑定事件,那么绑定事件和普通事件是有区别的.普通事件中,如果对某一个元素添加多个点击事件,那么,最后一个将会把前面的所有点击事件全部覆盖,只能执行最后一个点击事件:而在绑定事件中…