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 样式按钮，它不像链接那样运行。

编辑： 如果可以说明提供的替代方案的优点，我也会感激不尽。

- THX-1138

---

这个示例在传递参数方面是否是一个简化的例子？ - serg

@serg555：我已经修改了问题，所以它使用recordId作为参数，而不是Yes/No。 - THX-1138

Answer 1

将记录 ID 存储为元素本身的属性，但不要使用存储在奇怪格式中的元数据插件，我建议您使用 HTML5 的数据属性，这也是向后兼容的。

一行将会像这样：

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

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

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

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

内联 onclick 处理程序出于同样的原因是不好的。每行都创建一个新处理程序。这会减少灵活性，通常是一种不好的做法。

- Anurag

---

data- 是最好的选择。使用 data- 没有任何缺点吗？所有常见的浏览器都可以支持它吗？ - THX-1138

据我所知，在上述标准的背景下，没有任何特别的。而且我不确定在常见浏览器方面支持的范围有多远。 - Anurag

Answer 2

我会选择你的第二种方法 - 它是最简单的，也没有任何问题。

- serg

Answer 3

$('a.button').click(function() {
    var classes = $(this).attr('class').split(' ');
    var option;

    for( var i in classes )
    {
      if( classes[i].indexOf( 'option' ) != -1 )
      {
        option = classes[i].substr( 6 );
        break;
      }
    }

    console.log( option );
});
...
<a class='option-yes button'>Yes</a>    
<a class='option-no button'>No</a>

- ovais.tariq

---

这是一种更加浏览器友好的方法，适用于所有浏览器。 - ovais.tariq

另外，据我所记，元数据实际上是一个单独的jQuery插件，所以为什么要使用额外的插件而增加负担呢？此外，在需要保存大量数据的情况下，元数据会非常有用，但在这里，您只保存了一些小值，那么为什么要使用重型的元数据呢？ - ovais.tariq

有没有浏览器会在类中的 {} 上出现问题？ - THX-1138

@ovais.tariq：这正是我提出问题的原因。我正在寻找每种方法的优缺点。您的解决方案比元数据更好（？），但为什么它比onclick ='delete（1234）'更好呢？ - THX-1138

这种编码风格被称为“不侵入式JavaScript”，比起onclick='delete(1234)'更好，因为应该将功能与网页的标记或内容分离，以避免陷入缺乏可扩展性和不可重用代码的陷阱。您可以在此处阅读有关此风格的优点http://en.wikipedia.org/wiki/Unobtrusive_JavaScript。 - ovais.tariq

Answer 4

编辑：
听起来你是在动态地给这些“按钮”分配数据。最好使用jQuery的.data()方法将数据分配给按钮，然后从那里获取数据。我已经更新了我的示例代码。

如果每种类型的按钮执行不同的操作，则为每种类型的按钮使用不同的处理程序：

$('a.button').click(function (e) {
  // Stuff with $(this).data().recordId
});

$('a.button.no').click(function (e) { //Stuff });

$('a.button.no').click(function (e) { //操作 });

...
<a class="button yes">Yes</a>
<a class="button no">No</a>

- ntownsend

---

我的错。我已经更改了示例，所以它使用recordId而不是简单的yes/no。 - THX-1138

不确定你为什么有那种印象 :) 数据是在服务器上内联的。 - THX-1138