javascript - 在 JavaScript 中为许多链接动态创建事件处理程序的正确方法是什么？

Question

我正在页面上生成许多链接。我想在 DOM 加载后向链接添加 onmouseover、onmouseout 和 onclick 事件处理程序，即使用 jQuery 循环遍历链接并附加处理程序。然而问题是每个处理程序都需要特定于该链接的信息。

举个例子，如果我不想在 DOM 加载后执行此操作，则如下所示:

<a href="" onmouseover="somefunc(1,100);"></a>

所以在上面的例子中，1和100是从数据库读取并输出到页面上的数据，这些需要传递给函数。那么，如果我要在加载时附加事件处理程序，我该如何输出此链接的信息。这是正确的吗...？

<a href="" data="1,100">

换句话说，我创建自己的属性，然后在附加事件处理程序时获取该信息？这是标准方法还是有更好的方法？

Answer 1

既然你在问题中提到了 jQuery(但没有标记)，我将假设它是一个有效的选项。

如果您使用 jQuery > 1.4.3，jQuery 将自动解析 data-* 属性。

<a href="" data-number1="1" data-number2="100">

在你的 jQuery 点击处理程序中:

$("a").click(function(){
  var num1 =  $(this).data("number1");
  var num2 =  $(this).data("number2");
});

您还可以在 data-* 中存储 json 对象。

<a href="" data-numbers="{'num1: 1, 'num2': 2}">

$("a").click(function(){
  var numbers =  $(this).data("numbers");
  //numbers.num1 and numbers.num2
});