用括号调用JS函数

Question

为了我个人的改进,我在JS中摆弄了闭包和功能,当我发现这种行为让我感到非常困惑.

使用此函数,将其分配给变量,并通过jQuery从两个不同的HTML元素中调用它:

var print = function(){
console.log("Hello" );
};    

document.getElementById('element1').onclick = print();
document.getElementById('element1').onclick = print;

为什么地球上的第二个元素,如果点击,是正确打印"你好"的元素？
我一直认为你需要在函数名称后面加上括号来调用它.

事实上,如果我只是自己调用函数(而不是通过jQuery事件),它按预期工作:

var print = function(){
console.log("Hello" );
};    
print; //does nothing
print() //prints "Hello"

我在这里缺少什么？是与jQuery相关的东西吗？提前致谢!

Answer 1

不同之处在于调用函数vs对函数进行引用.

语法func()立即调用提供的函数.在element.onclick = func(),该事件将被绑定到返回值的func.

有了element.onclick = func,你不是在打电话func,只是引用它并将其分配给事件.

如果func碰巧返回一个函数,那么你可以使用element.onclick = func()语法,它会做你期望的.

document.getElementById('element1').onclick = print(); // Assigns the *return value* of print
document.getElementById('element1').onclick = print; // Assigns print

function returnPrinter() {
    return function print() {
        // do stuff
    }
}

document.getElementById('element1').onclick = returnPrinter(); // Assigns the return value, which is a function, thus doing what you want