Javascript 使用对象绑定事件

我尝试在对象循环中使用for键绑定事件对象

events = {
   mouseup:function(data){console.log(data)},
   mousedown:function(data){console.log(data)},
}
for (var key in events ) {
            console.log('binding: ' + key) ;
            $('body').on(key ,function(data){
                console.log(key ,data);
            })

}

但是，最后一个对象（mousedown）会为这两个事件绑定。有人能解释一下原因吗

查看小提琴以获得完整的示例

---

这是此类错误类型的一个很好的例子

您会得到这种行为，因为

console.log（key）

中的

key

等于

for

循环中的最后一个键。 一切正常，只需更改控制台日志以显示事件类型，而不是

键

：

events = {
   mouseup:function(data){console.log(data)},
   mousedown:function(data){console.log(data)},
}
for (var key in events ) {
            console.log('binding: ' + key) ;
            $('.box').on(key ,function(data){
                console.log(event.type);
            })

}

---

jsIDLE:

在事件触发时，

键的值是最后一个键。代码的执行类似于：

key = 'mouseup';

$('body').on(...);

key = 'mousedown';

$('body').on(...);

// By this time, key = 'mousedown'
// Mouse is clicked.
// When even fires, it looks for key which by now has the last key

考虑使用
Object.keys
和
array.forEach
。这样，处理程序将
key
视为该迭代的值，而不是共享的
key
变量

Object.keys(events).forEach(function(key){
  console.log('binding: ' + key) ;
  $('body').on(key ,function(data){
    console.log(key ,data);
  })
});

Yeap-因为在触发事件之前不会计算
键
，到那时它已被覆盖并保持“mousedown”

您需要在绑定事件时隔离
键的当前值。您有两个选择：

1） 通过立即执行的函数闭包将其发送进来。这将捕获事件回调范围内的
键的本地副本

for (var key in events ) {
    $('.box').on(key, (function(key) { return function(data){
        console.log(key);
    }; })(key));

2） 通过事件数据发送

for (var key in events ) {
    $('.box').on(key, {key: key}, function(evt){
        console.log(evt.data.key);
    });