将函数传递给纯文本对象中的.on（）

问题描述：

我当前的代码如下所示：

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

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

我的问题是，它好像myFunction()甚至没有叫。这是否工作，还是我搞砸了别的东西？

答

你误会功能在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 
});

感谢您的深入解释，帮助了很多！现在一切都像魅力一样，我学到了一些关于JS功能的东西！ :) – Nils

答

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

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

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

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

谢谢，你说得对。我接受了@ Hecksa的回答，因为它更深入地解释了函数的工作原理。 – Nils

答

你应该调用功能

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

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

既然你想通过在myFunction的参数，你必须做定义它像上面

将函数传递给纯文本对象中的.on（）

相关推荐