关于js addEventListener传参不能被识别的问题

问题描述

想要把全局定义的变量传递给addEventListener，虽然知道可以不用传参，直接可以获取，但是想通过参数传递试一下，于是出现了问题

代码

var temp = {};
temp.index = 0;
document.getElementById('d').addEventListener('click', function (e, temp) {
  console.log(temp);
  move(e, temp);
}, false)
function move(e, obj) {
  obj.index = 2;
}

结果如图

解决方法

自己在segmentfault上面提了这个问题，于是找到了最能说服我的答案

 

结论为这种形式只能传递一个参数

后续

如果真是这样的话，我进行了测试

var temp = {};
var y = 9;
temp.index = 0;
document.getElementById('d').addEventListener('click', function(e, temp, y) {
  console.log(arguments)
} , false)

结果如下：

可以看到确实是只接受了一个参数，那么如果想要传递多个参数怎么办呢，原来想过可以在function部分调用其他函数：

var temp = {};
var y = 9;
temp.index = 0;
document.getElementById('d').addEventListener('click',proxy(temp, y) , false)
function proxy(temp, y) {
  console.log(temp);
  console.log(y)
  console.log(arguments)
  move(temp);
  console.log(temp)
}
function move(obj) {
  obj.index = 2;
}

结果：

虽然貌似“成功”了，但存在两个问题：

1.  1proxy(temp, y) ，函数名加括号是直接调用，所以实际中在你还没有触发点击事件的时候，这个方法已经执行了。

2.  这种方法没法获取鼠标对象（event），而多数情况下我们是要对（event）对象进行操作的。

finally  addeventlistener传参最终的解决办法如下（使用bind）：

 

var temp = {};
temp.index = 0;
document.getElementById('d').addEventListener('click',proxy.bind(null, temp) , false)
function proxy(temp) {
  console.log(temp);
  console.log(arguments)
  move(temp);
  console.log(temp)
}
function move(obj) {
  obj.index = 2;
}

结果：

可以看到，这次仍然“显示”的传递了一个参数，但arguments中还有我们常常使用到的鼠标对象（event）