将 .on 事件与对象绑定

Binding .on events with an object

本文关键字：对象 绑定 事件 on      更新时间：2023-09-26

我试图在对象循环中使用 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);
            })
}

但是，最后一个对象（鼠标按下）将绑定到这两个事件。谁能解释为什么？

查看小提琴的完整示例。

https://jsfiddle.net/2439rw4a/

是的 - 因为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);
    });
这是

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

你会得到这样的行为，因为console.log(key)中的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/

到事件触发时，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);
  })
});
相关文章：