« クッキーでちょっと困った件 | トップページ | MySQLのDISTINCTとCONCATで日本語文字列が変になる。 »

2012.02.20

HTML要素のイベントハンドラを自動登録

リッチクライアントなWebアプリを作るときなど、1ページでたくさんのイベントハンドラ(onclickなど)を扱う場合、いちいちひとつずつ設定するのは大変ですし楽しくない。

こんな機械的な作業は自動的にやりましょう(jQuery必要です)。

mypage.html:とりあえずボタン置きます。

<script
  type='text/javascript'
  src='page.js'>
</script>
<script
  type='text/javascript'
  src='mypage.js'>
</script>
<!-- ボタン要素 -->
<button id='btnSample'>
自動登録されたボタン
</button>

page.js:ページロード時にボタンエレメントを探して、idが付けられていて「id+イベント名」的なメソッドがあるなら、bindします。

//Webページ基本クラス
Page = function () {}
Page.prototype.init = function () {
  var THIS = this;
  $('button').each(function() {
    var elm = this;
    if(elm.id) {
      $.each(['click'],
        function(i,evt) {
          var fxn = THIS[elm.id+'_'+evt];
          if(fxn) {
            $(elm).bind(evt,function() {
              return fxn.call(THIS, elm);
            });
          }
        });
    }
  });
}

mypage.js:具象的なイベント処理は派生クラス側に記述。

//Pageを継承したMyPageを定義する
MyPage = function() {}
MyPage.prototype = new Page();

//'btnSample'のクリック処理
//thisはMyPageのインスタンス
MyPage.prototype.btnSample_click =
function(element)
{
  alert(element.id + ' clicked');
}

$(function(){
  //Webページのインスタンス生成
  var page = new MyPage();
  //ページの初期化
  page.init();
});

HTML要素にID付けて、そのIDを利用した名前のメソッドを定義すれば勝手にbindされるわけで、同じ名前を何度も正確に書く手間から開放されます。

上の例ではbuttonのclickだけですが、他のHTML要素の他のイベントにも使えます。onsubmitとかonchangeとか。

« クッキーでちょっと困った件 | トップページ | MySQLのDISTINCTとCONCATで日本語文字列が変になる。 »

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

javascript / jQuery」カテゴリの記事

コメント

コメントを書く

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

トラックバック


この記事へのトラックバック一覧です: HTML要素のイベントハンドラを自動登録:

« クッキーでちょっと困った件 | トップページ | MySQLのDISTINCTとCONCATで日本語文字列が変になる。 »

2019年5月
      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

銀の弾丸

無料ブログはココログ

他のアカウント