如何将函数用作事件处理程序并使用参数直接调用？

Question

在 jQuery 脚本中，我有一个函数通常会在单击时被调用，因此充当事件处理程序，但我也需要直接调用它。在这两种情况下，它都需要一些参数。

所以，简化后的情况是这样的：

function go(e) {
  console.log(e.data.dir)
}

$("body").keydown(function(e) {
  if (e.which == 37) { // left
    go({dir: 'forward'});
  } else if (e.which == 39) { // right
    go({dir: 'forward'});
  }
});

$('.forward').on('click', {
  dir: 'forward'
}, go);

这是一个fiddle

这显然是行不通的，因为当我直接调用该函数时，没有 data 键。解决方法是像这样调用函数：

go({data: {dir: 'forward'}});

它确实有效，但非常丑陋。在这种情况下，正确的做法是什么？

Answer 1

我可以通过两种方式看到这一点。

您可以将参数对象存储在脚本顶部的变量中，并在需要在点击处理程序外部调用时将变量传递给 go()。这会让事情变得不那么难看。
或者您可以检查 e 在 go() 中是否为空，如果是，use/set 一些通用默认值。

两者都可以接受，具体取决于所有方法必须执行的操作。

Answer 2

我想我会做这样的事情（除非我需要这个活动）：

function go(data) {
    console.log(data.dir)
}

$("body").keydown(function(e) {
    if (e.which == 37) { // left
        go({dir: 'forward'});
    } else if (e.which == 39) { // right
        go({dir: 'forward'});
    }
});

$('.forward').on('click', function(){
    go({dir: 'forward'});
});

Answer 3

在这种特殊情况下，您可以使用 apply() 解决问题，如果条件为真，只需传递来自事件处理程序的参数

function go(e) {
    console.log(e.data.dir)
}

$("body").on('keydown', {dir: 'forward'}, function(e) {
    if (e.which === 37 || e.which === 39) {
        go.apply(this, arguments);
    }
});

$('.forward').on('click', {dir: 'forward'}, go);

FIDDLE

或者您可以传入具有匹配属性的对象

$("body").on('keydown', {dir: 'forward'}, function(e) {
    if (e.which === 37 || e.which === 39) 
        go({data:{dir: 'forward'}});
});

或者用自定义事件触发点击事件

$("body").on('keydown', {dir: 'forward'}, function(e) {
    if (e.which === 37 || e.which === 39) 
        $('.forward').trigger('click', [{data: {dir: 'forward'}}] );
});

如何将函数用作事件处理程序并使用参数直接调用？

How to use a function as event handler and to be directly called, with parameters?

javascript

jquery

jquery-events