Javascript 将参数传递给事件处理程序函数的最佳实践

假设我有一个按钮（实际上有几个按钮），点击它可以做两件事中的一件。这两件事中的哪一件取决于传递给函数的参数。这将在所有地方使用，所以我需要在一个函数。。。而不是每次都让代码在匿名函数中执行。我正在使用jquery，想知道最好的方法是向click handler函数提供一个参数和值。另外，如果可能的话，我想保留对按钮的引用，作为

$（this）

。以下是我得到的：

$(document).ready(function() {
   $('#button1').click({ labelStr: 'Open File' }, doLabel);
   $('#button2').click({ labelStr: 'Close Window' }, doLabel);
});

function doLabel(e) {
  console.log('it is: %o', e.data.labelStr);
  $(this).html(e.data.labelStr);
}

---

…这很有效--但我知道有很多方法可以剥这只猫的皮。这种方法有哪些漏洞？

如果我理解正确，我只需将字符串作为数据属性添加到按钮上，并将其发送到函数中。让函数使用

this

从按钮获取字符串

$（文档）.ready（函数（）{
$（'button'）。单击（function（）{doLabel（this）}）；
});
函数doLabel（e）{
$（e）.html（$（e）.data（'label-str'）；
}

请给我一个标签

请也给我一个标签

我觉得你的代码很好。您是否正在寻找一种方法来传递参数并使它们直接映射到单击处理程序的参数列表？如果是这种情况，您可以尝试以下方法：

$(document).ready(function() {
   $('#button1').click(function() {doLabel.call(this, "Open File");});
   $('#button2').click(function() {doLabel.call(this, "Close Window");});
});

function doLabel(labelStr) {
  console.log('it is: %o', labelStr);
  $(this).html(labelStr);
}

---

如果有多个参数，您可以执行

doLabel.call（this，arg1，arg2，…）

如建议的那样，我还将使用数据属性。您可以在事件处理程序中使用$（this）来引用元素，从而避免使用匿名函数

$（文档）.ready（函数（）{
$（“按钮”）。单击（doLabel）；
});
函数doLabel（）{
$（this.html（$（this.data（'label-str'））；
}

请给我一个标签

请也给我一个标签

我想我是在试图避免将click handler函数包装到另一个匿名函数中。。。但我不知道为什么。。。额外开销？更多代码？@Daveh0I想不出任何情况下这会导致任何性能问题。嗯，这个方法更典型。这看起来和我想要的非常接近。我很少看到这种情况。编写不需要参数的事件处理程序是更好的做法吗？我不知道这是否一定是更好的做法，但肯定更容易，因为您可以只传递函数名，而不必将其包装在匿名函数中（并且，您希望避免丢失

此
引用）。