jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript:将参数传递给onclick处理程序大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

我需要将额外的参数传递给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样式按钮,它不表现为链接.

编辑:
如果你可以论证所提供的替代品的优点,我也会感谢替代解决方案.

解决方法:

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

一行看起来像:

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

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

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

它与使用元数据插件相当,但它不会重载class属性.这不需要额外的插件.它使用单个处理程序,正如元数据插件所做的那样,它对大型数据集具有高性能.

由于同样的原因,内联onclick处理程序很糟糕.每行创建一个新的处理程序.它降低了灵活性,通常是一种不好的做法.

大佬总结

以上是大佬教程为你收集整理的JavaScript:将参数传递给onclick处理程序全部内容,希望文章能够帮你解决JavaScript:将参数传递给onclick处理程序所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: