3

重複の可能性:
クリック イベント ハンドラーがページの読み込み時にすぐに起動するのはなぜですか?

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');
}
4

2 に答える 2

7

実はここ

btn.click(bindClick(btn));

関数自体ではなく、関数の戻り値をクリックイベントにバインドしているだけです。
javascriptでは関数を返すことができるので、これは機能します

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

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

http://jsfiddle.net/VZ4Gq/

編集-2番目の関数はクロージャですか？はい、そうかもしれません。この例で見てみましょう

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を作成したためです。これは、executoの場合、bindClick（）内にある元のスコープで実行されます。

于 2013-01-25T08:42:56.013 に答える
1

問題は ：

btn.click(bindClick(btn));

bindClick メソッドを呼び出します。これでその行を変更して、動作が JavaScript#2 と同じかどうかを確認してください:

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

またはもっと簡単：

btn.click({param1: btn }, $(this));
于 2013-01-25T08:46:26.160 に答える