js,addEventListener参数传递
解决方法
因为i相对匿名函数是外面的变量,就把循环绑定的时候,将i的值传入到匿名函数内,就可以了。因此需要在匿名函数(事件函数)外包裹一个匿名函数, 并立即执行。
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener('click', (function (num) {
return function (e){
e.preventDefault();
alert('I am link #' + num);
}
})(i), 'false');
};
如果执行点击事件的时候,最终的事件函数外层因为立即执行的匿名函数,函数体内已经存在了num变量,而这个num变量是每次循环的时候传入的i。
另外一种解决方法没有用到闭包,而是给每个对象添加一个属性
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
elems[i].num = i;
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + this.num);
}, 'false');
};
js,addEventListener参数传递的更多相关文章
- js addEventListener事件多次绑定问题
如果为了避免 js addEventListener事件多次绑定问题,可以使用.onclick直接绑定,后一次click绑定会覆盖调前一次.
- js addEventListener attachEvent
attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementB ...
- 一道JS addEventListener面试题
在园里看到一道面试题,<div id="test">Click Here</div> var node=document.getElementById('t ...
- 在php中怎么利用js把参数传递给弹窗
1.在php页面中经常用到把参数传递给弹窗页面,在弹窗页面中操作 2.两种方式,截图为一种 3.最常见的就是利用hideen隐藏域,点击按钮的时候把要传递的参数值传递给隐藏域,需要的时候在弹窗中获取. ...
- js addEventListener调用传参函数
先看这段代码 function abc(key){ console.log(key); } for(let i=0;i<oInput.length;i++){ oInput[i].addEven ...
- js addeventlistener 刮刮贴
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- js函数-参数传递
写js的时候,函数是不可避免的,几乎90%的js都是由函数组成的,函数之间考什么连接,参数! 好了,用代码的运行结果说明问题. function fn1(str,strs){ var str=&quo ...
- JS URL参数传递 谷歌乱码解决
//第一个页面 var name=encodeURIComponent("参数"); var url="test1.html?name="+name; //第二 ...
- Java中的变量传递机制以及JS中的参数传递机制
JAVA: 传递基本类型是 就是基本的值传递 不会影响值本身. package com.wuqi.p1; public class ValuePassTest { public static void ...
随机推荐
- SQL Server简单语句/待整理
数据库对象:表Table,视图View,存储过程Stored Procedure,触发器Trigger 关系:1关系=1二维表,1关系有1关系名.1关系=1表对象 属性/字段: 二维表中垂直方向的列 ...
- 每次Xcode 升级之后 插件失效,两步解决
以下内容来源:http://www.cocoachina.com/bbs/read.php?tid=296269 每次Xcode 升级之后 插件失效,两步解决 1.打开终端,输入以下代码获取到DVTP ...
- win764位Ruby2.0环境搭建之Ruby on Rails
一:安装Ruby 1.在http://rubyinstaller.org 下载需要的ruby版本,因为是exe文件,所以,你可以直接安装. 安装结束后,cmd上运行 ruby -v 显示版本号.如果正 ...
- [翻译]Primer on Cognitive Computing(认知计算入门)
Source Kelly J., Primer on Cognitive Computing 20150216. 侵删,联系方式:zhoujiagen\@gmail.com. 按A candidate ...
- js 实现进度条功能。
/** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...
- PHP常用数组函数介绍
array_splice() 删除数组中的指定元 array_splice(数组名,从前往后删的个数,new一个数组的大小);没有第三参数也就没有返数组,没有第三个参数时,第二个参数的意义为从前往后保 ...
- 关于Java中的基本数据类型转换
Java中的基本类型有四种,其中整型分为byte.short.int.long,浮点型分为float.double,字符型char,布尔型boolean.8种类型的级别由低到高byte->sho ...
- Python实例3
3.一个整数,它加上100后是一个完全平方数,再加上268又是一个完全平方数,请问该数是多少? 正解: 源码: #!/usr/bin/python # -*- coding: UTF-8 -*- im ...
- [ JS 进阶 ] 基本类型 引用类型 简单赋值 对象引用
ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型,拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两 ...
- Python 十进制转二进制代码实现
def my_bin(num): la = [] if num < 0: return '-' + my_bin(abs(num)) while True: num, remainder = d ...