JavaScript:将参数传递给 onclick 处理程序

Question

我需要将额外的参数传递给 onclick 处理程序。我无法决定哪种方式“更好”:

编辑:
上下文:我有一张显示事件花名册的表格。每行都有一个“删除”按钮。将 recordId 传递给删除处理程序的更好方法是什么？

$('a.button').click(function() {
    var recordId = $(this).metadata().recordId;
    console.log(recordId);
});
...
<tr>...<a class='{recordId:1} button'>delete</a></tr>
<tr>...<a class='{recordId:2} button'>delete</a></tr>

或

function delete(recordId) {
    console.log(recordId);
}
...
<tr>....<a class='button' onclick='deleteRecord(1)'>Delete</a></tr>
<tr>....<a class='button' onclick='deleteRecord(2)'>Delete</a></tr>

每个选项的优缺点是什么？

注意:我将 a.button 用作自定义的 CSS 样式按钮，它不表现为链接。

编辑:
如果您可以论证所提供替代方案的优势，我也将不胜感激替代解决方案。

Answer 1

将记录 id 存储为元素本身的属性，但我建议您使用同样向后兼容的 HTML5 数据属性，而不是使用以奇怪格式存储它的元数据插件。

一行看起来像:

<tr> .. <a data-id="1">delete</a> .. </tr>

在处理程序中，检索属性值并对其进行操作

function deleteRecord() {
    var rowId = $(this).attr('data-id');
    ...
}

它与使用元数据插件相当，但它不会重载class 属性。为此不需要额外的插件。它使用单个处理程序，就像元数据插件一样，适用于大型数据集。

出于同样的原因，内联 onclick 处理程序是错误的。每行创建一个新的处理程序。它降低了灵 active ，通常是一种不好的做法。