在普通对象中将函数传递给 .on()

Question

我想在鼠标输入时调用自定义函数。

我当前的代码如下所示：

var myFunction = function(element)
{
   //do something with element
}

$( selector ).on({
    mouseenter: myFunction($(this)),
    mouseleave: myFunction($(this))
}, ' selector ');

我的问题是似乎 myFunction() 甚至都没有被调用。这到底有用还是我搞砸了其他东西？

Answer 1

您没有传递函数。您正在立即调用函数并传递其 return 值。

由于您想使用参数调用该函数，而该参数的值直到事件触发才确定，因此您需要创建一个新函数。

function use_myFunction_as_event_handler(event) {
    myFunction($(this));
}

$('selector').on({
    mouseenter: use_myFunction_as_event_handler,
    mouseleave: use_myFunction_as_event_handler
}, 'selector');

Answer 2

您应该将函数调用为

var myFunction = function(element)
{
   //do something with element
}

$('selector').on({
    mouseenter: function(){
        myFunction($(this));
    },
    mouseleave: function(){
        myFunction($(this));
    }
}, 'selector');

因为你想在 myFunction 中传递参数，你必须像上面那样定义它

Answer 3

您误解了函数在 javascript 中的工作方式。这里有一个简单的方法让 mouseenter 调用一个函数。

$(selector).on({
    mouseenter: function(event) {
        console.log(event);
    }
});

这是有道理的。当 mouseenter 事件被调用时，该函数就会执行。太好了。

你的问题是这段代码：

var functionToCall = function(event) {
    console.log(event);
}

$(selector).on({
    mouseenter: functionToCall(event);
});

实际上并没有做与前面示例相同的事情。

当您在函数名称后加上方括号时，您是在调用该函数。 mouseenter 想要的是一个函数引用 - javascript 会在每次事件发生时调用你给它的函数引用。

我们在第一个例子中分配给 mouseenter 的是一个匿名函数引用——我们实际上并没有调用我们创建的函数。 Javascript 正在为我们做这件事。在第二个例子中，我们调用了函数，所以 mouseenter 实际上设置为函数的 return 值，而不是函数本身。

要解决此问题，您只需将函数引用传递给事件而不是调用函数。注意，你不能直接通过这种方式传递参数（这不是不可能，但你不应该需要），但是 $(this) 仍然是一样的。

var myFunction = function() {
    var element = $(this);
    // code...
}

$(selector).on({
    mouseenter: myFunction,
    mouseleave: myFunction
});

在普通对象中将函数传递给 .on()

Passing function to .on() in plain object

javascript

jquery

mouseevent