js addEventListener调用传参函数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(‘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。

以上是关于js addEventListener调用传参函数的主要内容,如果未能解决你的问题,请参考以下文章

回调函数如何传参?

如何把这个JS封装成函数?用时调函数传参就可以!

JS基础自定义函数

js_递归函数在严格模式下的调用方法

JS基础之传参(值传递对象传递)

Js事件传播流程