是否有通过锚标记的参数调用JavaScript的最佳实践？

Question

我已阅读以下问题

Javascript和锚标记，最佳做法？

似乎建议解决方案如下

<a id="foo" href="#">Click Me</a>

document.getElementByID("foo").onclick = function() { alert("hi"); }

但是，假设我有一堆链接，它们都用不同的参数调用同一函数。 我快速而又肮脏的解决方案是生成类似以下内容的东西

<a href="#" onClick="myFunction('1001');return false">Click Me 1</a>
<a href="#" onClick="myFunction('1002');return false">Click Me 2</a>
<a href="#" onClick="myFunction('1003');return false">Click Me 3</a>

有没有办法使侦听器解决方案适应参数？

Answer 1

您可以在有问题的每个元素上使用以下行的data属性：

<a href="#" id="foo" data-id="1000">Click Me 1</a>​

并使用以下回调：

document.getElementById("foo").onclick = function() { 
    alert(this.getAttribute('data-id'));
}​

这里是小提琴形式。

不过，更好的选择可能是使用jQuery处理事情。 假设上面的链接格式如下所示：

$('#foo').click(function(){
  alert($(this).attr('data-id'));
});

Answer 2

您可以使用委派。

<div id='links'>
<a href="#" class="link" data-param1='1000' data-param2='something'>click</a>
<a href="#" class="link" data-param1='1001' data-param2='something'>click</a>
<a href="#" class="link" data-param1='1002' data-param2='something'>click</a>
</div>
<script type='text/javascript'>
$links = document.getElementById("links");

$links.onclick=function(e){
  element = e.target;
  if(element.tagName="a" && element.getAttribute("class")=="link"){
    console.log(element.getAttribute("data-param1"))
    console.log(element.getAttribute("data-param2"));
  }
  return false;
}
</script>

Answer 3

请注意，当您使用HTML编写如下代码时：

<a href="#" id="foo" onClick="myFunction('1001');return false">Click Me 1</a>

在JS中完全相同：

document.getElementById("foo").onclick = function(event) {
    myFunction('1001');
    return false;
}

解析器找到事件属性后，它将以完全相同的方式创建一个匿名函数。