Question

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

我目前的代码如下：

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

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

我的问题是，myFunction()似乎甚至没有被调用。这甚至可以工作还是我弄乱别的东西？

Answer 1

你没有通过一个功能。您正在调用函数立即并传递其返回值。

由于您想要使用参数调用函数，并且在事件触发之前不确定该参数的值，您需要创建一个新函数。

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

你误解了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实际上设置为函数的返回值，而不是函数本身。

要解决此问题，您只需要传递一个函数引用而不是调用该函数。请注意，您不能以这种方式直接传递参数（这不是不可能的，但您不应该这样做），但$（this）仍然是相同的。

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

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

Answer 3

您应该将该功能称为

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

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

由于你想在myFunction中传递参数，你可以像上面那样定义它

将函数传递给普通对象中的.on（）

3 个答案: