多态函数作为事件回调

Polymorphic function as event callback

本文关键字：事件 回调 函数 多态      更新时间：2023-09-26

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

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

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

JSFiddle

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

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

如果我想做你想做的事情，那么我会使用稍微不同的范式。类似的东西

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

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

这也行不通： 

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

将函数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);​
相关文章：