Question

我已阅读以下问题

Javascript and Anchor Tags, Best Practice?

它似乎提出了一个解决方案，如下面的

<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

您可以在相关的每个元素上使用这些行的数据属性：

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

并使用以下回调：

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

以小提琴形式here。

但更好的选择可能是使用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;
}

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

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

3 个答案: