libro
www.tuyano.com
初心者のためのjQueryプログラミング入門

イベント関連の機能 (6/6)

作成:2010-04-04 21:49
更新:2010-05-11 21:19

■独自のイベントを作成する

イベントというのは、特定の状況などに応じて自動的に発生するものですが、これはJavaScriptでは最初からどういうときにどんなイベントが発生するか決められています。このイベントそのものを追加することはできません。が、jQueryを使えば、独自のイベントを簡単に追加することができます。

独自イベントの追加は、２つのメソッドで行います。１つはイベントの組み込み、そしてもう１つはイベントの発生です。

・イベントの組み込み
《jQuery》.bind( イベント名 , 関数リテラル );

・イベントの発生
《jQuery》.trigger( イベント名 );
「bind」は、イベントを新たにバインドするためのものです。これは通常、'click'など既に用意されているイベントに、新たに処理をバインドするのに用います。が、イベント名として、独自の名前を指定することも可能なのです。そうすると、自分が定義した新たなイベントに処理を設定することができます。

そのイベントは、jQueryオブジェクトの「trigger」メソッドを呼び出すと発生します。ですから、あらかじめbindで独自イベントをバインドしておき、スクリプトを実行中、イベントを発生させる条件などをチェックして「よし、イベントを発生させよう！」というところでtriggerを呼び出すようにしておくのです。こうすることで、特定の状況下で独自のイベントを発生させ、処理を実行させることができるようになります。

※利用例

下のリスト欄に掲載したサンプルでは、「２つのチェックボックスが両方ともONになったときに発生するイベント」が設定されています。$(document).readyを使い、ロード時に、
$(document).bind('myevent',function(event){……});
このようにして「myevent」という名前のイベントをdocumentに設定しておきます。そして、２つのチェックボックスをクリックしたときに呼び出されるoncheck関数で、
if($('#ck1').attr('checked') & $('#ck2').attr('checked')){
    $(document).trigger('myevent');
}
このように、２つのチェックボックスのチェック状態がtrueのとき、$(document).trigger('myevent');を実行し、myeventを発生させています。

※選択状態の取得について

チェックボックスのチェク状態は、valメソッドでは取得できないので注意してください。これは、エレメントのアトリビュート（属性）を取得する「attr」というメソッドで得ることができます。アトリビュートというのは、HTMLのタグの中に記述している属性のことと考えてください。

例えば、<input type="checkbox" checked="cheched">というようなタグがあった場合、このcheckedを取得するのにattrメソッドが用いられます。この他にも、例えば<img>タグのsrcなどの取得などでも利用されます。

※プログラムリストが表示されない場合

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">
		<!--
		$(document).ready(function(){
			$(document).bind('myevent',function(event){
				alert('独自イベントが発生しました。');
			});
		});
		function oncheck(){
			if($('#ck1').attr('checked') & $('#ck2').attr('checked')){
				$(document).trigger('myevent');
			}
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
		<input type="checkbox" id="ck1" onclick="oncheck();">
			<label for="ck1">チェック１</label><br>
		<input type="checkbox" id="ck2" onclick="oncheck();">
			<label for="ck2">チェック２</label><br>
	</body>
</html>
※関連コンテンツ

「初心者のためのjQueryプログラミング入門」に戻る