javascript - 独立的事件处理程序以实现可重用性

Question

我有一个简单的点击处理程序，它将提醒其链接的 href，如下所示:

<a id="link" href="http://www.google.com">Google</a>

$('a#link').on('click', function() {
  alert($(this).attr('href'));
});

我如何分离函数(以及如何调用它)以便它可以被另一个点击处理程序调用？

function showHref() {
  /* What to do here because $(this) won't resolve to <a> anymore. */
}

// I'd like a#another-link to be able to call that same function above.    
<a id="another-link" href="http://www.microsoft.com">Microsoft</a>

$('a#another-link').on('click', /* How to call showHref? */);

谢谢。

Answer 1

你可以这样做:

function showHref() {
   alert($(this).attr('href'));
}

$('a#link').on('click', showHref);
$('a#another-link').on('click', showHref);

在这段代码中，showHref 中的 this 将 指向被点击的链接，因为 jQuery 确保被点击的链接是调用上下文(使用 .call() ，你可能想继续阅读)。但是，如果您要手动调用 showHref，this 将不会引用您的链接。

如果你想要一个既可以手动调用又可以通过 jQuery 绑定(bind)的 showHref 的定义，将引用作为参数传递可能是最简洁的方法:

function showHref(link) {
    alert($(link).attr('href'));
}

在这种情况下，您必须按如下方式调整您的监听器:

$('a#link').on('click', function() {
    showHref(this);
});

但也可以组合选择器:

$('a#link, a#another-link').on('click', function() {
   alert($(this).attr('href'));
});