Question

可能重复：
Why does click event handler fire immediately upon page load?

我对Javascript函数的理解存在差距所以我很难理解为什么我的事件处理程序在没有匿名包装器的情况下定义时会自动触发。

HTML

<a href="#" id="change-html">Change HTML</a>

Javascript＃1

var btn = $('#change-html');
btn.click(bindClick(btn)); // bindClick gets executed right away and only once

function bindClick(source){
    console.log('get here');
}

Javascript＃2

var btn = $('#change-html');
btn.click(function(){
    bindClick(btn); // bindClick is only executed on the anchor's click event 
});

function bindClick(source){
    console.log('get here');
}

Answer 1

其实

btn.click(bindClick(btn));

您只是将函数的返回值绑定到click事件，而不是函数本身因为在javascript中你可以返回一个可以工作的函数

var btn = $('#change-html');
btn.click(bindClick(btn));

function bindClick(source){
    return function() {
        console.log('get here');
    }    
}

http://jsfiddle.net/VZ4Gq/

EDIT - 第二个函数是一个闭包吗？是的，它可能是。在这个例子中让我感到高兴

var btn = $('#change-html');
btn.click(bindClick(btn));
// global scope
var inside = "i'm outside a closure";
console.log(inside);
function bindClick(source){
    // local scope 
    var inside = "i'm inside a closure";
    return function() {
        console.log(inside);
    }   
}

http://jsfiddle.net/VZ4Gq/1/

当你尝试这个时，你首先记录“我在一个闭包之外”，然后当你点击按钮时，你会得到“我在一个闭包内”。这是因为你实际上创建了一个闭包和ffunction，当它执行时，它在它的原始范围内执行，这是在bindClick（）

中

Answer 2

问题是：

btn.click(bindClick(btn));

它将调用bindClick方法。尝试使用此更改该行，并查看JavaScript＃2的行为是否相同：

btn.click({param1: btn }, bindClick);

或者更简单：

btn.click({param1: btn }, $(this));

click事件的事件处理程序自动触发 - jQuery

2 个答案: