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

Question

假设我有一个按钮(实际上是几个按钮)，点击时将做两件事中的一件。这两件事中的哪一件取决于传递给函数的参数。这将在所有地方使用，所以我需要放入一个函数。而不是每次都在匿名函数中执行代码。我正在使用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);
}

…这是有效的- jsfiddel -但我知道有很多方法来剥这只猫的皮。在这种方法中可以发现哪些漏洞?

Answer 1

你的代码看起来不错。您是否正在寻找一种方法来传递参数并将它们直接映射到单击处理程序的参数列表?如果是这种情况，您可以试试:

$(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, ...)

Answer 2

就像DelightedD0D建议的那样，我也会使用数据属性。你可以在事件处理程序中使用$(this)来引用元素，从而避免使用匿名函数。

$(document).ready(function() {
   $('button').click(doLabel);
});
function doLabel() {
  $(this).html($(this).data('label-str'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<button data-label-str="Open File">Give me a label please</button>
<p>&nbsp;</p>
<button data-label-str="Close Window">Give ME a label TOO please</button>

Answer 3

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

获取字符串

jsFiddle

$(document).ready(function() {
   $('button').click(function(){doLabel(this)});
});
function doLabel(e) {
  $(e).html($(e).data('label-str'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<button data-label-str="Open File">Give me a label please</button>
<p>&nbsp;</p>
<button data-label-str="Close Window">Give ME a label TOO please</button>