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

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

在这种特殊情况下，您可以使用 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'}}] );
});