javascript - 多态函数作为事件回调

Question

我需要将此函数作为回调传递给 DOM 事件

var fooo = function() {
  $(this).append("foo");
  fooo = function() {
     $(this).append("bar");
  };
};

$("#hover").hover(fooo);​

此示例应附加“foo”，然后附加“bar”，但它不起作用。我究竟做错了什么？

JSFiddle

Answer 1

这也不起作用：

var fooo = function() {
    $(this).append("foo");
};

$("#hover").hover(fooo);

fooo = function() {
    $(this).append("bar");
};

因为您更改了变量，但没有更改传递给hover事件的回调。

您需要将新函数分配为回调：

var fooo = function() {
    $(this).append("foo");
};

$("#hover").hover(fooo);

fooo = function() {
    $(this).append("bar");
};
$("#hover").unbind('hover').hover(fooo);​

Answer 2

您正在更改分配给的函数fooo，而不是分配为 的回调的函数.hover。

为清楚起见，当您将函数作为事件的处理程序传递时（例如在这种情况下），$().hover(fooo)您传递的不是变量，fooo而是它指向的函数。如果您重新分配fooo给其他东西，原始函数仍然是作为事件处理程序绑定的函数。

如果我想做你想做的事，那么我会使用稍微不同的范例。就像是

var fooo = (function() {
    var altBehavior = false;
    return function() {
        $(this).append(altBehavior ? "bar" : "foo");
        altBehavior = true;
    }
})();

$("#hover").hover(fooo);​

实际的绑定函数永远不会改变，但它存在的上下文会改变。

Answer 3

您将函数分配给fooo悬停事件，然后更改变量，而不更改处理程序本身。您应该取消绑定然后绑定另一个函数。 hover是两个事件的简写，因此解开每个事件：

var fooo1 = function() {
  $(this).append("foo").unbind("mouseenter", fooo1).unbind("mouseleave", fooo1).hover(fooo2);
};

var fooo2 = function() {
  $(this).append("bar");
}

$("#hover").hover(fooo1);​