javascript - 标签和点击事件 href ="javascript: my_function()"与 onclick ="my_function()"或

Question

有多种方法可以定义 anchor 标记上的点击操作，例如:

<a href="javascript: void(0)" onclick="funciton_X()">click here</a>

或

<a href="javascript: funciton_X()">click here</a>

或

<a id="a_tag" href="javascript: void(0)">click here</a>  
<script type="text/javascript">  
$('#a_tag').click(function(){})  
</script>

我使用哪一个有显着差异吗？他们的优点和缺点是什么。还有第四种选择吗？

Answer 1

最后一个名为 unobtrusive javascript我建议您使用它，因为它提倡将标记和 JavaScript 明确分开。它还具有标记文件较小的优点，而外部 JavaScript 文件将由客户端浏览器缓存。

正如 @David Dorward 在评论部分指出的那样，如果您使用最后一种方法，建议将 href 属性指向某个真实的 url，以便客户端将被重定向，例如他禁用了 JavaScript。这种技术称为progressive enhancement当您定义站点的最小标记并基于客户端浏览器功能时，您可以使用标记无法提供的功能(例如 AJAX 和其他一些不错的 UI 效果)来丰富其功能。

总结一下:

<a id="a_tag" href="basic.htm">click here</a>

然后在一个单独的 javascript 文件中(例如 jQuery 但您可以使用任何您喜欢的内容):

$(function() {
    $('#a_tag').click(function() {
        // TODO: some nice effect
        return false;
    });
});