如何使用函数作为事件处理程序，以及如何使用参数直接调用函数

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

本文关键字：函数 何使用 参数 调用 程序 事件处理      更新时间：2023-10-11

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

这是一把小提琴

这显然不起作用，因为当我直接调用函数时，没有data键。一个变通方法是调用这样的函数：

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

它很管用，但很难看。在这种情况下，正确的做法是什么？

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

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

有两种方法可以看出这一点。

  • 您可以将参数对象存储在脚本顶部的一个变量中，并在需要在单击处理程序之外调用该变量时将其传递给go()。这会让事情变得不那么丑陋
  • 或者，您可以检查e在go()中是否为null，如果为null，则使用/设置一些通用默认值

任何一种都是可以接受的，这取决于所有方法都要做什么。

我想我会这样做（除非我需要事件）：

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'});
});
相关文章：