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

Question

假设我有一个按钮（实际上是几个按钮），单击它会执行 2 个操作中的 1 个。这两件事中的哪一件取决于传递给函数的参数。这将被全部使用，所以我需要放入一个函数......而不是每次都在匿名函数中执行代码。我正在使用 jquery 并想知道向点击处理程序函数提供参数和值的最佳方法是什么。另外，如果可能的话，我想完整地保留对按钮的引用 $(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

如果我没理解错的话，我只是将字符串作为数据属性添加到按钮上，然后将 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>

Answer 2

我觉得你的代码没问题。您是否正在寻找一种传递参数并将它们直接映射到点击处理程序的参数列表的方法？如果是这样的话，你可以试试这个：

$(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 3

就像 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>

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

Best practice for passing arguments to an event handler function

javascript

jquery

event-handling