js 事件绑定传入自定义参数

使用原生 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() 的内部函数，也可以访问到这个对象，这个问题就解决了。