Question

jQuery's hover的文档仅显示了使用该函数的一种方法：

$('.myClass').hover(function () {
    console.log('on mouse over');
},
function () {
    console.log('on mouse out');
});

但是，当您将这些更改为命名函数时，它无法正常工作，在页面加载时触发命名函数（或者只要将其粘贴到控制台中）：

function onMouseOver() {
    console.log('on mouse over');
}

function onMouseOut()
    console.log('on mouse out');
}

$('.myClass').hover(onMouseOver(), onMouseOut());

将最后一行更改为：

$('myClass').hover(onMouseOver, onMouseOut);

按预期工作（触发事件），但不允许我将任何内容传递给命名函数。有没有办法允许我将变量传递给函数？

Answer 1

是的，你需要使用匿名函数：

$('myClass').hover(function( e ) {
    onMouseOver( param1, param2... );
}, function( e ) {
    onMouseOut( param1, param2... );
});

Answer 2

您可以通过调用它来将变量传递给命名函数：

$('.myClass').hover(function() {
    onMouseOver(arg);
}, function() {
    onMouseOut(arg);
});

这是将参数，参数传递到该事件的命名函数的唯一方法。

Answer 3

这是函数引用与函数调用的问题。添加“（）”会调用函数（在这种情况下，您将在绑定时执行...有效地绑定函数的结果而不是函数本身。

要传递参数，最简单的选择是将命名函数包装在匿名函数中（如@antyrat刚发布的那样）。

而且不，这不是悬停的怪癖，这是标准的JavaScript（以及大多数其他具有一流功能的语言）。

Answer 4

正如其他几个人所说，你必须使用 currying 或 binding 将值传递给函数。在你写这个的例子中：

$('.myClass').hover(onMouseOver(), onMouseOut());

你实际上是在该行上立即调用onMouseOver（）和onMouseOut（）方法，而当鼠标实际移出或移出元素时，不;你写的东西相当于写这个：

var mouseOverResult = onMouseOver();
var mouseOutResult = onMouseOut();
$('.myClass').hover(mouseOverResult, mouseOutResult);

这绝对不是你想要的。

jQuery只能理解function(event)形式的函数，所以如果你想要更多的参数或其他参数，你将不得不使用currying将它们放在那里。 Currying（以设计概念的数学教授命名）可以被认为是创建一个新函数，其中您要传递的值在其中被“预先绑定”。

因此，假设您有一个变量foo，您希望将其传递给onMouseOver处理程序，如下所示：

function onMouseOver(foo) {
    ...
}

...

var foo = "Hello, World";

$('myClass').hover(...);

为了能够传递该值，您需要另一个函数来包装foo和onMouseOver以及jQuery可以使用的函数签名。你这样做：

function onMouseOver(foo) {
    ...
}

...

var foo = "Hello, World";

var curriedOnMouseOver = function(event) {
    onMouseOver(foo);
};

$('myClass').hover(curriedOnMouseOver);

正如其他几个人所建议的那样，你可以通过在hover()调用中创建curried闭包来避免额外的变量声明：

function onMouseOver(foo) {
    ...
}

...

var foo = "Hello, World";

$('myClass').hover(function(event) {
    onMouseOver(foo);
});

上面的示例还显示了如何将事件传递给您的函数，只需向其中添加更多参数：

function onMouseOver(event, foo, bar) {
    ...
}

...

var foo = "Hello, World";
var bar = "Goodbye, World";

$('myClass').hover(function(event) {
    onMouseOver(event, foo, bar);
});

JavaScript的函数---或闭包 ---是非常强大的工具，值得你学习一些你可以用它们做的事情，比如这些例子。

Answer 5

hover糖方法并不适用于复杂情况。

在您的情况下，最好使用.on('mouseenter')和on('mouseleave')，以便您可以将额外的event数据传递给每个方法，例如

$('.myClass').on('mouseenter', {param1: val1}, onMouseOver).on('mouseleave', {param2: val2}, onMouseOut);

然后在您的处理程序中，您可以访问这些参数：

function onMouseOver(e) {
    console.log(e.data.param1);
}

function onMouseOut(e) {
    console.log(e.data.param2);
}

这就是那种 jQuery方式。

如何将其他参数传递给$ .fn.hover（）中的处理程序？

5 个答案: