Question

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

作为一个例子，如果我在DOM加载后不想这样做，它将看起来像：

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

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

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

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

Answer 1

我会说，如果您正在编写新标记，最简单的方法是使用HTML5 data-* attributes：

<a href="" data-minVal="1" data-maxVal="100">Link Text</a>

然后你可以通过data()方法在jQuery中使用它（不适用于早期版本的jQuery）：

function someFunc(element, min, max){
    // Do something
}


$(function(){
    $('a').click(function(){
        var $this = $(this); // only create one jQuery object with this
        someFunc(this, $this.data('minVal'), $this.data('maxVal'));
    });
});

Answer 2

由于您在问题中提到了jQuery（但没有标记），我将假设它是一个有效的选项。

如果您使用的是jQuery＆gt; 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
});

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

2 个答案: