リッチクライアントな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とか。
最近のコメント