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

Question

我需要将额外的参数传递给onclick处理程序.我无法确定哪种方式"更好":

编辑:
上下文:我有一个表格,显示一个事件的名单.每行都有一个"删除"按钮.将recordId传递给delete-handler的更好方法是什么？

$('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同样的原因,内联处理程序很糟糕.每行创建一个新的处理程序.它降低了灵活性,通常是一种不好的做法.