| 目次 |
|---|
|
・DOMイベントへの対応 ・基本的なイベント ・jQuery.Event ・イベントハンドリング ・イベントヘルパー |
WEBアプリケーションを作成する上で、重要なのはインターラクティブに画面や状態を変化させることです。
画面や状態を変化させる際、ユーザーからの指示を受け取る必要があります。
Javascriptでは、「onClick」などのDOMイベントを定義することで対応することが可能です。
しかし、要素毎に属性としてイベントを定義することは大変手間ですし、似た要素に大量に適用する場合には不向きです。
また、addEventListenerメソッドなどでまとめて設定することも可能です。
しかし、addEventListenerメソッドなどは、使い方が結構難しく、またIEなどブラウザによっては別のメソッドを使う必要があります。
リスト1. DOMでのイベントの追加例
var eventTarget = document.getElementById("foge");
// リスナーの追加
if(eventTarget.addEventListener){
// DOM Level2 Event Modelサポートブラウザ(FireFoxなど)
eventTarget.addEventListener("click", fogeClicked, false);
}else if(eventTarget.attachEvent){
// MS-IE
eventTarget.attachEvent("onclick", fogeClicked);
}
※実例はありません。
jQueryは、イベントの取り扱いも簡潔にしています。
また取り扱い方はブラウザに依存しません。
CSSセレクタを使えるので、大量のイベント制御も簡単です。
コールバック関数(匿名関数を含む)を用いますので、グローバル名前空間での衝突を避けた安全なコードを書くことが出来ます。
リスト2. jQueryでのイベントの追加例
jQuery('#foge').click(fogeClicked);
※実例はありません。
最も基本的なイベントは、「ページ読み込み時」の処理です。
jQueryでスクリプトを定義する上で、最も使われるメソッドです。
リスト3. ready(コールバック関数)
// ドキュメント準備完了時の処理
var clockTimer;
jQuery(document).ready(function(){
// 1秒おきにmyClock()関数を実行
clockTimer = window.setInterval( myClock, 1000);
});
実装例
ここ「」に現在時刻が表示されていると思います。
これは、ドキュメントが読み込まれた段階で定義されたものです。
jQueryの専用イベントオブジェクトです。
jQueryのイベントシステムは、W3C標準に準拠しています。
イベント系jQueryのメソッドにおいては、コールバック関数の第1引数として渡されます。
イベントオブジェクトはjQueryのイベントハンドラーに対応します。
ブラウザの仕様に依存しないので、window.eventなどから取得する必要もありません。
元となるイベントオブジェクトのプロパティのほとんどは、このオブジェクトに複製されます。
リスト4. jQuery.Eventクラス
// new付きで定義
var e = new jQuery.Event("click");
// new無しで定義
var e = jQuery.Event("click");
リスト5. jQuery.Event.type
jQuery('#Sample35').click(function(evt){
alert('イベントの種類:' + evt.type );
});
リスト6. jQuery.Event.target
jQuery('#Sample36').click(function(evt){
var target = evt.target;
alert('イベント対象:' + target.tagName + '#' + target.id + '.' + target.className );
});
リスト7. jQuery.Event.relatedTarget
jQuery('#Sample37').mouseout(function(evt){
var target = evt.relatedTarget;
alert('イベント対象:' + target.tagName + '#' + target.id + '.' + target.className );
});
リスト8. jQuery.Event.currentTarget
jQuery('.Sample38').click(function(evt){
var target = evt.currentTarget;
alert('イベント対象:'
+ target.nodeName
+ '\n'
+ '実際の対象は' + evt.target.nodeName );
});
リスト9. jQuery.Event.pageX/pageY
jQuery('.Sample39').click(function(evt){
alert('X=' + evt.pageX
+ '\n'
+ 'Y=' + evt.pageY );
});
リスト10. jQuery.Event.result
jQuery('#Sample310').click(function(evt){
return '1st:' + evt.timeStamp;
});
jQuery('#Sample310').click(function(evt){
alert( evt.result + '\n2nd:' + evt.timeStamp);
});
リスト11. jQuery.Event.timeStamp
var last;
jQuery('#Sample311').click(function(evt){
var str = '今回:' + evt.timeStamp ;
if(last){
str = str + '\n' + '前回:' + last;
}
last = evt.timeStamp;
alert(str);
});
リスト12. jQuery.Event.preventDefault()
jQuery('#Sample312').click(function(evt){
alert('ジャンプ中止');
evt.preventDefault();
});
jQuery HOMEへ
リスト13. jQuery.Event.isDefaultPrevented()
jQuery('#Sample313').click(function(evt){
last = evt.timeStamp;
evt.preventDefault();
});
jQuery('#Sample313').click(function(evt){
if( evt.isDefaultPrevented()){
alert('1度' + last + 'に中止しました');
}
else
{
alert('今、ジャンプを中止しました');
evt.preventDefault();
}
});
jQuery HOMEへ
リスト14. jQuery.Event.stopPropagation()
jQuery('.Sample314a button').click(function(evt){
alert( this.tagName);
});
jQuery('.Sample314b button').click(function(evt){
alert( this.tagName);
evt.stopPropagation();
});
jQuery('.Sample314a,.Sample314b').click(function(evt){
alert( this.tagName);
});
リスト15. jQuery.Event.isPropagationStopped()
jQuery('.Sample315 button').click(function(evt){
if(evt.isPropagationStopped()) alert('1:止めました');
evt.stopPropagation();
if(evt.isPropagationStopped()) alert('2:止めました');
});
リスト16. jQuery.Event.isPropagationStopped()
jQuery('.Sample316 *').click(function(evt){
alert('第1回目の処理');
evt.stopImmediatePropagation();
});
jQuery('.Sample316 *').click(function(evt){
alert('第2回目の処理');
});
リスト17. jQuery.Event.isImmediatePropagationStopped()
jQuery('.Sample317 *').click(function(evt){
if(evt.isImmediatePropagationStopped()) alert('1:完全中止');
evt.stopImmediatePropagation();
if(evt.isImmediatePropagationStopped()) alert('2:完全中止');
});
jQueryは、addEventListenerメソッド同様に、イベントと動作を結びつけたり、解除することが可能です。
リスト18. bind(イベントタイプ[,data],コールバック関数)
// 「Sample418」クラス下の全要素にクリック時の処理を定義。
// その際、「since=2011」というデータも付加。
jQuery('.Sample418 *').bind('click',{ since:2011 },function(evt){
alert('このイベントは'
+ this.tagName + 'のイベント'
+ '\nタイムスタンプ:' + evt.timeStamp
+ '\nデータ「since」:' + evt.data.since
);
});
実装例
リスト19. unbind([イベントタイプ[,data]])
var sw419 = true;
function Sample419(){ alert('マウスアウト'); }
jQuery('.Sample419 *').bind('click',function(evt){
// クリックする度に動作設定を変更します。
var str = jQuery(this).text();
if( sw419 ){
// マウスアウトを登録します。
str = str.replace('登録','解除');
jQuery(this).bind('mouseout', Sample419());
sw419 = false;
}
else
{
// マウスアウトを削除します。
str = str.replace('解除','登録');
jQuery(this).unbind('mouseout');
sw419 = true;
}
jQuery(this).text(str);
});
// マウスアウトを登録します。
jQuery('.Sample419 button').bind('mouseout', Sample419);
実装例
リスト20. trigger([イベントタイプ[,data]])
jQuery('.Sample420').bind('submit',function(evt,msg){
// フォーム送信時の処理です。
var str = '送信しません。';
evt.preventDefault();
if( msg ){
str = str + '\n' + msg;
}
alert(str);
});
jQuery('.Sample420 input:last').click(function(evt){
// resetボタンですが、ついでにフォーム送信時の処理もします。
jQuery('.Sample420').trigger('submit',['※resetボタンにて']);
});
実装例
リスト21. live(イベントタイプ, コールバック関数)
jQuery('.Sample421 *').live('click',function(evt){
jQuery(this).after('<button>実行ボタンのコピー</button>');
evt.preventDefault();
});
実装例
リスト22. die([イベントタイプ[,コールバック関数]])
jQuery('.Sample422 *').live('click',function(evt){
evt.preventDefault();
jQuery(this).after('<button>実行ボタンのコピー</button>');
jQuery('.Sample422 *').die('click');
});
実装例
イベントの動作を定義する場合、常にbindで定義するのは結構面倒です。
jQueryでは、よく使われるイベントをイベントヘルパーといった形で、メソッド化しています。
これにより、簡単にイベントの動作を定義できます。
その中でも、jQuery独自のイベントヘルパーが存在します。
このヘルパーを使うと、インターラクティブなWEBアプリケーションを簡単に作ることができます。
リスト23. hover(over, out)
jQuery('.Sample523 *').hover(
function(evt){
//over
jQuery(this).css('color','red').css('font-weight','bold');
},
function(evt){
//out
jQuery(this).css('color','').css('font-weight','');
}
);
実装例
リスト24. toggle(fn1, fn2, ..., fnN)
jQuery('.Sample524 *').toggle(
function(evt){
// 1回目
var str = jQuery(this).text();
jQuery(this).css('color','red');
jQuery(this).text(str.replace('1回','2回'));
},
function(evt){
// 2回目
var str = jQuery(this).text();
jQuery(this).css('font-weight','bold');
jQuery(this).text(str.replace('2回','3回'));
},
function(evt){
// 3回目
var str = jQuery(this).text();
jQuery(this).css('color','').css('font-weight','');
jQuery(this).text(str.replace('3回','1回'));
}
);
実装例
jQueryでは、その他一般的なイベントヘルパーも存在します。