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

多态函数作为事件回调

3 个答案: