・手順(7) イベントを記述しよう

JavaScriptのライブラリjQueryを使っていますので、イベントの記述は、jQueryの流儀で定義します。jQueryでは、初期化イベントを記述する際には、下記のように記述します。

<script type="text/javascript"><!--
     $(function(){
         // ここに初期化処理
    };
--></script>

上記の初期化関数の中に、ボタンのイベント設定処理を記述します。jQueryでクリックしたときのイベントを設定するには、下記のように記述します。

$("名前").click( クリックした時の処理 );

電卓では、ボタンの数が多いので、ボタン1つずつにイベントを設定するのが面倒なので、ここでは、イベントを生成する関数 newButtonEvent()を定義していおいて、数字ボタンや演算子ボタンの各キーを連続で指定しています。

$(function(){
        // ボタンごとにイベントの設定
        // 数字キー
        for (var i = 0; i <= 9; i++) {
                $("#btn" + i).click(newButtonEvent(i));
        }
        // 演算キー
        var btns = ["dot","rev","ce","div","jpy","mul","cny",
                "minus","mod","plus","minus","eq"];
        for (var i = 0; i < btns.length; i++) {
                var s = btns[i];
                var btn = $("#" + s + "_btn");
                btn.click(newButtonEvent(btn.val()));
        }
        // 関数オブジェクトを生成する関数
        function newButtonEvent(n) {
                return function(){ pushButton(n); };
        }
}