Question

我有一个名为thisAnimate的自定义函数我想点击一个元素时调用。问题是如果我使用jQuery on将函数放在一个空函数中，它是有效的，但如果我直接使用该函数则不行。

为什么我不能直接在on函数中使用该函数？

此代码将起作用

var element = $(this);

element.on( 'click', function() {
    thisAnimate(element);
});

这个代码不起作用???

var element = $(this);

element.on( 'click', thisAnimate(element));

Answer 1

因为on()函数的第二个参数是要执行的函数，而不是函数执行的结果。

此代码：

element.on( 'click', function() {
    thisAnimate(element);
});

表示单击按钮时，执行匿名函数，该函数依次执行thisAnimate()函数并将element参数传递给它。但是，在匿名函数中，this指的是引发事件的元素。因此，如果您想将其传递给thisAnimate()函数，您应该写：

element.on( 'click', function() {
    thisAnimate(this);
});

尽管在您的代码中，您在更高的范围内声明了element变量，因此thisAnimate()函数可以访问它，而无需在参数中传递它。

同样，这段代码：

element.on( 'click', thisAnimate);

表示单击按钮时，执行thisAnimate()功能。它将自动传递标准事件参数（例如event）。在thisAnimate()函数内，this指的是引发事件的元素。

但是这段代码：

element.on( 'click', thisAnimate(element));

表示单击按钮时，执行thisAnimate()函数的返回值。除非thisAnimate()函数返回一个函数，否则这显然没有任何意义。对于大多数情况，这是一个错误。同样，element变量未定义。

Answer 2

on方法可以被认为是：

element={
    on:function(nameOfEvent, callBackFunction){
        //
    }
};

现在这里'callBackFunction'应该引用一个函数对象。因为当“nameOfEvent”发生时需要调用该函数。如果thisAnimate(element)返回一个函数对象，那么element.on( 'click', thisAnimate(element));也可以。但遗憾的是，这个陈述没有返回一个函数对象。

使用点击功能

2 个答案: