Core > イベントハンドラ設定パターン

Patterns: イベントハンドラの設定パターン

by s_hiroshi

HTML

<button id="foo">Click</button>
<button id="bar">Click</button>

JavaScript

// jQueryのclick関数の引数はコールバック関数だけ
// elem.click(fn)
// elem.click(fn, param1,..paramN)  --> × 引数は渡せない


// 上記に対処したハンドラパターン
// 1. 即時実行
// 2. クロージャー

x = 'global';


// 1. 即時実行
(function() {
    var x = 'local1',
        foo = $('#foo');
    foo.click(function() {
        foo.text(x);
    });

}());


// 2. クロージャー
var callback = (function(bar) {
    var x = 'local2';
    return function() {
        bar.text(x);
    };
}($('#bar')));
$('#bar').click(callback);