イベント関連の機能 (3/6)
作成:2010-04-04 20:07
更新:2010-05-11 21:13
更新:2010-05-11 21:13
■イベントをバインドする
一般的なタグで使われるイベント類（onclickとかonkeypressといったもの）は、jQueryではメソッドとして用意されています。これも、やはり他のメソッドと同様に、引数なしで呼び出すと値が取得され、引数を渡して呼び出すと値を変更します。例えば、クリック時のイベント（通常、onclickで設定されるイベント）は、
・イベントへの処理の設定
――こんな具合に行うことができます。イベントで実行する処理は関数リテラルとして用意し、それを設定するわけです。jQueryオブジェクトに用意されているイベント用のメソッドとしては以下のようなものがあります。
・マウス関係
click――クリック時のイベント処理
dbclick――ダブルクリック時のイベント処理
mouseenter――マウスポインタが領域内に入ったときの処理
mouseleave――マウスポインタが領域外に出たときの処理
mouseover――マウスポインタが領域内に入ったときの処理
mouseout――マウスポインタが領域外に出たときの処理
hover――マウスポインタが重なったり、離れたりしたときの処理
・キーボード関係
keypress――キーをタイプしたときの処理
keydown――キーを押し下げたときの処理
keyup――キーを話したときの処理
・その他のイベント
focus――フォーカスを得たときの処理
blur――フォーカスを失ったときの処理
change――値が変更されたときの処理
select――選択項目が変更されたときの処理
resize――リサイズ時の処理
scroll――スクロール時の処理
error――エラー時の処理
submit――フォーム送信時の処理
では、実際の利用例を下のリストに掲載しましょう。これは、スクリプトを使って画面にメッセージを追加するサンプルです。追加したメッセージは、クリックするとどれをクリックしたか上部に表示するようになっています。
ここでは、メッセージをクリックしたときの処理をdoClickという変数に関数リテラルとして用意しています。そしてボタンをクリックすると、新たに<div>のオブジェクトを生成し、それにonclickのイベント処理を設定して組み込んでいます。
このように、ダイナミックにエレメントを生成するようなときに、イベント用メソッドを使った処理のバインドは威力を発揮します。
・イベントへの処理の設定
《jQuery》.onclick( 関数リテラル );・イベント処理の取得
変数 = 《jQuery》.onclick();
――こんな具合に行うことができます。イベントで実行する処理は関数リテラルとして用意し、それを設定するわけです。jQueryオブジェクトに用意されているイベント用のメソッドとしては以下のようなものがあります。
・マウス関係
click――クリック時のイベント処理
dbclick――ダブルクリック時のイベント処理
mouseenter――マウスポインタが領域内に入ったときの処理
mouseleave――マウスポインタが領域外に出たときの処理
mouseover――マウスポインタが領域内に入ったときの処理
mouseout――マウスポインタが領域外に出たときの処理
hover――マウスポインタが重なったり、離れたりしたときの処理
・キーボード関係
keypress――キーをタイプしたときの処理
keydown――キーを押し下げたときの処理
keyup――キーを話したときの処理
・その他のイベント
focus――フォーカスを得たときの処理
blur――フォーカスを失ったときの処理
change――値が変更されたときの処理
select――選択項目が変更されたときの処理
resize――リサイズ時の処理
scroll――スクロール時の処理
error――エラー時の処理
submit――フォーム送信時の処理
※利用例
では、実際の利用例を下のリストに掲載しましょう。これは、スクリプトを使って画面にメッセージを追加するサンプルです。追加したメッセージは、クリックするとどれをクリックしたか上部に表示するようになっています。
ここでは、メッセージをクリックしたときの処理をdoClickという変数に関数リテラルとして用意しています。そしてボタンをクリックすると、新たに<div>のオブジェクトを生成し、それにonclickのイベント処理を設定して組み込んでいます。
div.click(doClick);作成した<div>要素のオブジェクトには、このようにしてonclickのイベント処理を設定しています。これにより、クリックするとdoClickの関数が呼び出されるようになります。
このように、ダイナミックにエレメントを生成するようなときに、イベント用メソッドを使った処理のバインドは威力を発揮します。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
var doClick = function (event){
$('#message').text('クリック：' + $(event.target).text());
}
function doAction(){
var color = $('#color').val();
var div = $('<div></div>').text(color).css('background',color);
div.click(doClick);
$('#message').after(div);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message">色の値を入力</div>
<input type="text" id="color">
<input type="button" value="Click" onclick="doAction();">
</body>
</html>
※関連コンテンツ