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‘);

};
时间: 2024-10-24 21:10:37

js,addEventListener参数传递的相关文章

JS URL参数传递 谷歌乱码解决

//第一个页面 var name=encodeURIComponent("参数"); var url="test1.html?name="+name; //第二个页面 var name=GetUrlParameters("name"); // 获取参数方法 name=decodeURIComponent(name); //encodeURIComponent 进行参数编码. //decodeURIComponent 进行参数解码. JS URL参

从JS的变量复制看JS的参数传递

变量的复制: 基本类型:从一个变量向另一变量复制基本类型的值,会在变量对象上创建一个新值,然后把该值复制到为新的变量分配的位置上 1 console.log(" 基本类型:"); 2 var num1=1; 3 var num2=num1; //此时num1=1,num2=1,这是两个完全独立的变量,互不影响,只是值相等而已 4 5 console.log(" before copy --> num1:"+num1+" , num2:"+n

js addEventListener removeEventListener

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px "Helvetica Neue"; color: #454545 } li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } li.li3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px &quo

js addEventListener调用传参函数

先看这段代码 1 function abc(key){ 2 console.log(key); 3 } 4 for(let i=0;i<oInput.length;i++){ 5 oInput[i].addEventListener('focus',abc(i)); 6 } 会发现focus这个操作还未执行,i的值已被依次打印出来. 如何传入传参函数而不被立即执行呢,方法一:给addEventListener绑定一个匿名函数. element.addEventListener('mouseove

在php中怎么利用js把参数传递给弹窗

1.在php页面中经常用到把参数传递给弹窗页面,在弹窗页面中操作 2.两种方式,截图为一种 3.最常见的就是利用hideen隐藏域,点击按钮的时候把要传递的参数值传递给隐藏域,需要的时候在弹窗中获取. <input type="hidden" name="win_hidden" class="win_id" value="" />

js addeventlistener 刮刮贴

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /><style>

html5之Web Worker -- js多线程编程

什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript和UI页面会共用一个线程,在HTML页面中执行js脚本时,页面的状态是不可响应的,直到脚本已完成.而这段代码可以交给Web Worker在后台运行,那么页面在Javascript运行期间依然可以响应用户操作.后台会启动一个worker线程来执行这段代码,用户可以创建多个worker线程. 有两种 W

js传递参数

/js中参数的传递之数值传递 //这次传递相当于将count的值拷贝了一份给num,num的改变并不影响count(两块不同的内存区域) function addTen(num){ num += 10; return num; } var count = 20; var result = addTen(count); console.log(count); //20 console.log(result); //30 //js中参数传递之对象的传递 //这次传递是person的值(person在

JavaScript 函数参数传递到底是值传递还是引用传递

tips:这篇文章是听了四脚猫的js课程后查的,深入的理解可以参看两篇博客: JavaScript数据类型--值类型和引用类型 JavaScript数据操作--原始值和引用值的操作本质 在传统的观念里,都认为JavaScript函数传递的是引用传递(也称之为指针传递),也有人认为是值传递和引用传递都具备.那么JS的参数传递到底是怎么回事呢?事实上以下的演示也完全可以用于Java 首先来一个比较简单的,基本类型的传递: function add(num){ num+=10; return num;