« チェスとか将棋は苦手です | トップページ | 梅雨オンリーの自転車通勤 »

2012.06.26

[javascript+jQuery] イベントハンドラーの一括自動設定

WEBアプリで、ボタンやチェックボックスやSELECT~OPTION等にイベントハンドラを設定するのは、それなりに面倒。そういうのは自動でやればよい。リッチクライアントで大量にある場合なんて特に。

イベントハンドラを登録したい要素にIDを設定し、ID+イベント名みたいな関数を定義。ページのロード時にこのような関数をjQueryで検索して、自動的に登録してやればよいわけ。

以下、jQueryを使っている前提でご紹介

こんなHTMLがあったとして、

<button id="btn1" type='button'>button 1</button>
<input id="chk1" type="checkbox">check 1
<select id="sel1">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
</select> 

それぞれのイベントハンドラを定義。

var btn1_click = function btn1_click(element) {
    alert(element.id);
};
var chk1_change = function(element) {
    alert(element.id + $(element).attr('checked'));
};
var sel1_change = function(element) {
    alert(element.id + $(element).val());
};

ページの読み込み時に、特定タグの要素について、操作オブジェクトとハンドラ関数を自動的にbindする。

$(function() {
    //ボタンのclick
    setElementHandler('button', 'click');
    //チェックボックスのchange
    setElementHandler('input[type=checkbox]', 'change');
    //SELECT~OPTIONのchange
    setElementHandler('select', 'change');
});
//jQueryのセレクタで選択した要素にidがあり、且つ 
// id+イベント名な関数があるなら、bindする。
function setElementHandler (stor, eventName) {
    $(stor).each(function (index, element) {
        if (element.id) {
            try {
                var hdl = eval('(' + element.id + '_' + eventName + ')');
                if (hdl) {
                    $(element).bind(eventName, 
                        function () {
                            hdl.call(undefined, element);
                        });
                }
             } catch (e) { /*例外は無視*/ }
        }
    });
}

不毛なコーディングはNothing。時間は有効に使おう。

« チェスとか将棋は苦手です | トップページ | 梅雨オンリーの自転車通勤 »

プログラミング」カテゴリの記事

javascript / jQuery」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: [javascript+jQuery] イベントハンドラーの一括自動設定:

« チェスとか将棋は苦手です | トップページ | 梅雨オンリーの自転車通勤 »

2019年8月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
フォト

Google AdSense

銀の弾丸

無料ブログはココログ

他のアカウント