使用原生 js 编写组件时遇到了这个问题,记录一下。
问题描述
有一个函数 a() , 我希望在点击的时候调用,a() 函数需要的参数除了触发点击的事件外,还需要一个额外的对象 obj。
为元素添加监听器,可以这么写:
document.getElementById('test').addEventListener('click',a)
但是,问题就出现了,事件触发时只会把事件作为第一个参数传入 a() 函数中,obj 不是个全局变量,怎么把 obj 传入 a() 中呢?
解决方法
使用闭包就可以解决这个问题
假设 a()函数是这样的,除了事件对象外,我们还需要一个 obj 对象
function a(e, obj){
console.log(obj);
}
直接将 a() 函数绑定到事件上,肯定是无法获得 obj 的,我们可以将这个函数包装一下
function fn(obj){
function a(){
console.log(obj);
}
return a;
}
document.getElementById('test').addEventListener('click',fn('测试'))
通过外层的 fn() 函数,返回了函数 a() , 真正绑定上去的是这个返回的函数。而传入的 obj 在 fn() 的作用域中,a() 作为 fn() 的内部函数,也可以访问到这个对象,这个问题就解决了。