标签和点击事件 href="javascript: my_function()" vs onclick="my_function()" 或答案

【问题标题】：A tag and click events href="javascript: my_function()" vs onclick="my_function()" or标签和点击事件 href="javascript: my_function()" vs onclick="my_function()" 或
【发布时间】：2011-04-02 08:18:41
【问题描述】：

有几种方法可以定义锚标签上的点击动作，例如：

<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>

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

【问题讨论】：

标签： javascript xhtml cross-browser

【解决方案1】：

最后一个称为unobtrusive javascript，我建议您使用它，因为它主张在标记和javascript 之间明确分离。它还具有标记文件更小的优点，而外部 javascript 文件将被客户端浏览器缓存。

正如@David Dorward 在 cmets 部分中指出的那样，如果您使用最后一种方法，建议将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;
    });
});

【讨论】：

如果最后一个真的不显眼，href 会指向有用的地方。
@David Dorward，我同意你的看法。将在答案中包含您的评论。

【解决方案2】：

我更喜欢后者。将 javascript 与 html 分离是一种很好的做法，并且可以更轻松地维护代码。 JQuery、Prototype、Mootools 等库对此有很大帮助。这与在外部样式表中处理 CSS 与内联样式非常相似。首选是将它们分开，以便您生成干净且语义化的 html。

再举一个例子：

<form id="myForm"> .... </form>

假设我想提交此表单，但我想以异步方式提交，我可以使用 JQuery 附加一个事件，该事件将通过 AJAX 提交，如果 javascript 不可用，它会很好地降级以执行标准回邮。

【讨论】：

【解决方案3】：

您甚至需要在函数中添加this.preventDefault();。

//sry 我不知道如何为 DarinDimitrov 的回答添加评论。

【讨论】：

无需添加。 jQuery 会为您做到这一点。另外，preventDefault 是 Event 对象的方法，而不是事件目标。