Javascript 可重用的独立事件处理程序

我有一个简单的点击处理程序，它会提醒其链接的

href

，如下所示：

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

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

$（'a#link'）。在（'click'，function（）上{
警报（$（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? */);

函数showHref（）{
/*在这里做什么，因为$（this）无法解析为
$（'a#另一个链接'）。在（'click'，/*如何调用showref？*/）；

---

谢谢。

您可以这样做：

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

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

var handler = function () {
    alert($(this).attr('href'));
};

在这段代码中，

showref

中的

this

将引用正在单击的链接，因为jQuery确保正在单击的链接是调用上下文（使用您可能想要阅读的

.call（）

）。但是，如果您手动调用

showref

，

此链接将不会指向您的链接

如果您想要一个既可以手动调用又可以通过jQuery绑定的
showref
定义，那么最好将引用作为参数传递：

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'));
});

您可以将函数逻辑放入如下引用中：

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

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

var handler = function () {
    alert($(this).attr('href'));
};

然后可以使用该引用初始化事件侦听器：

$('#link').on('click', handler);

当然，你可以重复使用

$('#some_other_link').on('click', handler);

或者在事件处理程序上下文之外调用它（如果您正在形成事件处理程序函数，这通常是没有意义的——但通常可以使用lambdas来完成）

但是，如果只想触发元素上的事件，则应调用相应的事件触发器函数

$('#link').click();
// or
$('#link').trigger('click');

你写道：

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

确实不需要调用jQuery来获取元素的
href
属性。
它当然应该是
this.href
，而不是
$（this.attr（'href'）
，但是；-）@Alnitak：我通常不介意jQuery的往返。
this.className
在某些浏览器中有效，而在其他浏览器中无效，
$（this）.attr（“类”）
在所有方面都有效。对我来说，jQuery最大的好处是不必处理不同的浏览器实现。在我看来，特定属性
href
在主要浏览器中的行为没有任何这样的不一致性，这并不是破例的一个非常有说服力的理由意见。手动调用
handler（）
不会像写的那样引用被单击的链接作为其
this
关键字，因此将不起作用。@David~完全正确。不同的用途，不同的方法。@David~ woops，对不起，当我回答这个问题时，OP没有进一步澄清这个问题。让我编辑一下。