将 JS 事件绑定到链接的最佳方法是什么？答案

【问题标题】：What is the best method to bind an JS event to a link?将 JS 事件绑定到链接的最佳方法是什么？
【发布时间】：2012-02-05 11:48:45
【问题描述】：

什么是最好的方法，为什么？

参考？

<a href="javascript:helloworld()">link</a>

点击？

<a href="#" onClick="helloworld()">link</a>

按框架绑定（例如 jquery）？

<a id="foo" href="#">link</a>
…
$('#foo').live('click',helloworld);

【问题讨论】：

我认为一个相关的问题是，如果您不希望点击像<a> 标记通常那样触发页面重新加载，那么您根本就使用<a> 标记。
当然是最后一个，因为它将内容与行为分开。
@Pointy 因为锚点可以通过 TAB 访问，而 SPAN 则不能。另一方面，按钮存在外观问题（使用 CSS 设置样式并不那么容易）。
@ŠimeVidas，将[tabindex="0"] 和[role="button"] 添加到<span>，您就有了一个按钮。 <a href="#">link</a> 不会做任何事情，它会将视口滚动回页面顶部。如果您在顶部有一条消息说“此网站需要 JavaScript，请阅读启用 JavaScript 的说明”，将它留给非 js 用户可能会很有用。我知道要求 JavaScript 并不总是好的，但对于 webapps 来说它是有意义的。
@zzzzBov tabindex 属性将使 SPAN 元素可以通过 TAB 访问，但是按 ENTER 不会激活它。（在锚点聚焦时按 ENTER 键，将其激活。）请参见此处：jsfiddle.net/NMwdj

标签： javascript html methods hyperlink bind

【解决方案1】：

这取决于。通常，您应该从不有一个什么都不做的链接。如果您的用户禁用了 JavaScript，或者无法加载，该怎么办？您必须优雅地降级以获得可访问的网站。因此，例如，如果您有一个使用 Ajax 加载的框，您应该将其链接到另一个页面，然后将处理程序绑定到不显眼的单独 JavaScript 中：

<a class="loadPage" href="actualPage.php">Go to my page</a>

在另一个文件中：

$('.loadPage').click(function(e) {
    // Load with Ajax...
    e.preventDefault(); // Stop the link from going through
});

如果链接是用 JavaScript 生成的，那么大部分时间都可以使用# 作为href。但是，在这种情况下，您仍应使用 JavaScript 附加处理程序，而不是在 innerHTML 中设置 onclick (*shudder*)。

所以，一般来说：如果您在生产代码中有onclick 属性或javascript: 链接，就在您的HTML 中，您并没有将内容、行为和表示分开；您无法访问；而且你不是语义的。不要这样做！

【讨论】：

【解决方案2】：

以上都不是。

您应该将 JS 保存在外部文件中（关注点分离使代码更易于管理和重用），并且使用库可以消除支持标准事件绑定的浏览器与旧版本 Internet Explorer 之间的差异。

但是，JavaScript 应该是unobtrusive。您不应该从页面顶部的链接开始。

【讨论】：

【解决方案3】：

不要使用 'javascript:myaction()' 。

总是更喜欢使用框架，因为它创建了一个真正的绑定（意味着向浏览器窗口注册事件）。所以最好的方法是： $('#foo').live('click',function(){我的动作.... });

它还允许您将 javascript 保存在一个单独的文件中，这是处理脚本的最佳实践。

第二个最好的方法是使用 onClick 事件。

【讨论】：

【解决方案4】：

不要在 HTML 标记中使用 javaScript！

$(function() {
   var foo = $('#foo');

   if(foo[0]) {
      foo.click(function(event) {
          //..
          event.preventDefault();
      });
   }
});

或使用on()，因为jQuery 1.7+

foo.on('click', function(event) {
   //..
   event.preventDefault();
});

也不要使用live() never（截至jQuery 1.7，.live() 方法已弃用）！

【讨论】：