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()是否为空，如果是，请使用/设置一些通用默认值。

要么是可以接受的，取决于所有方法必须做什么。

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

或使用自定义事件触发click事件

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

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

3 个答案: