正文

js addEventListener调用传参函数

IP云
IP云V管理员/3 阅读
08/11
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先看这段代码

function abc(key){
console.log(key);
}
for(let i=0;i<oInput.length;i++){
oInput[i].addEventListener('focus',abc(i));
}

会发现focus这个操作还未执行，i的值已被依次打印出来。

如何传入传参函数而不被立即执行呢，方法一：给addEventListener绑定一个匿名函数。

element.addEventListener('mouseover',function(e,some){ fn(e,some); });

tip：绑定匿名函数的话不能使用removeEventListener移除事件。

方法二：bind方法。bind和call/apply相似，通常用于改变函数的this的指向，不过和后二者不同，bind中不额外加()操作符，就不会立即函数。对于这个特性，也正是我们在这里所需要的。

function abc(key){
console.log(key);
}
for(let i=0;i<oInput.length;i++){
oInput[i].addEventListener('focus',abc.bind(this,i));
}

tip：bind是ES5中的方法，不兼容ie8。需要兼容的话MDN上有对应的polyfill。