Question

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

http://hub.browserstack.com/wd/hub/

然而，最后一个对象（mousedown）绑定了两个事件。谁能解释为什么？

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

https://jsfiddle.net/2439rw4a/

Answer 1

Yeap - 因为key在事件发生之前不会被评估，并且到那时它已被覆盖并且仍然会被淹没。

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

1）通过立即执行的函数关闭发送它。这会在事件回调范围内捕获key的本地副本。

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);
    });

Answer 2

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

您会遇到此类行为，因为key中的console.log(key)等于for循环中的最后一个密钥。一切正常，只需更改控制台日志以显示事件类型，而不是key：

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);
            })

}

jsfiddle：https://jsfiddle.net/2439rw4a/

Answer 3

当事件触发时，key 的值是最后一个键。代码的执行类似于：

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);
  })
});

将.on事件与对象绑定

3 个答案: