イベント関連の機能 (5/6)
作成:2010-04-04 21:25
更新:2010-05-11 21:16
更新:2010-05-11 21:16
■使い捨てイベントと永続イベント
jQueryでは、イベントをダイナミックに設定できますが、通常のイベントバインドの他、「使い捨てのイベント」や「永続的なイベント」というのも作成できます。これらは、それぞれ以下のような働きをします。
・使い捨てイベント
これは、「１回実行したら消えるイベント」です。これは「one」というメソッドを使い、以下のように設定をします。
・永続的なイベント
IDなどでなく、クラス名やタグの種類を指定してjQueryオブジェクトを取得した場合、その種類のオブジェクトに常に設定されるイベントを組み込むことができます。これは「live」というメソッドで行います。
このliveによってバインドされたイベントは、その後、新たにエレメントを作成した場合でも、常に設定されるようになります。例えば、$('div').live('click',hoge);というように実行したとしましょう。その後、新たに<div>タグのオブジェクトを作成すると、自動的にクリックするとhogeが実行されるようになります。わざわざclickにイベントを設定する必要はないのです。
簡単なサンプルを下のリスト部分に掲載しておきます。ここでは、'msg'というクラスのオブジェクトに、oneとliveでクリック時のイベント処理を設定しています。最初に表示されているメッセージをクリックすると、最初の１度だけ、「１回だけ！：～」というメッセージが画面に表示されます。以後、このメッセージは二度と現れません。
また、入力フィールドに色の値を書いてボタンを押すと新しく<div>タグが作成されますが、これにはクリックするとそのエレメントのテキストを表示するイベントが自動的に組み込まれます。実際に動かして動作を確認してみると、liveとoneの両方の性質がよくわかるでしょう。
・使い捨てイベント
これは、「１回実行したら消えるイベント」です。これは「one」というメソッドを使い、以下のように設定をします。
《jQuery》.one( イベント名 , 関数リテラル );例えばクリックした時のonclickに処理を設定したければ、第１引数に'click'と指定すればよいわけです。これで、第２引数に指定した関数リテラルがイベントにバインドされます。イベントが発生すると、その関数が呼び出され実行されるとともに、このoneでバインドされたイベントも消えてしまい、二度とは実行されなくなります。
・永続的なイベント
IDなどでなく、クラス名やタグの種類を指定してjQueryオブジェクトを取得した場合、その種類のオブジェクトに常に設定されるイベントを組み込むことができます。これは「live」というメソッドで行います。
《jQuery》.live( イベント名 , 関数リテラル );基本的な使い方は、oneと同様ですね。第１引数にイベント名、第２引数にそれで呼び出される関数リテラルを設定します。
このliveによってバインドされたイベントは、その後、新たにエレメントを作成した場合でも、常に設定されるようになります。例えば、$('div').live('click',hoge);というように実行したとしましょう。その後、新たに<div>タグのオブジェクトを作成すると、自動的にクリックするとhogeが実行されるようになります。わざわざclickにイベントを設定する必要はないのです。
※利用例
簡単なサンプルを下のリスト部分に掲載しておきます。ここでは、'msg'というクラスのオブジェクトに、oneとliveでクリック時のイベント処理を設定しています。最初に表示されているメッセージをクリックすると、最初の１度だけ、「１回だけ！：～」というメッセージが画面に表示されます。以後、このメッセージは二度と現れません。
また、入力フィールドに色の値を書いてボタンを押すと新しく<div>タグが作成されますが、これにはクリックするとそのエレメントのテキストを表示するイベントが自動的に組み込まれます。実際に動かして動作を確認してみると、liveとoneの両方の性質がよくわかるでしょう。
(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">
<!--
$(document).ready(function(){
$('.msg').live('click',function (event){
alert('クリック：' + $(event.target).text());
});
$('.msg').one('click',function (event){
alert('１回だけ！：' + $(event.target).text());
});
});
function doAction(){
var color = $('#color').val();
var div = $('<div></div>').text(color).css('background',color).addClass('msg');
$('#message').after(div);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div class="msg" id="message">色の値を入力</div>
<input type="text" id="color">
<input type="button" value="Click" onclick="doAction();">
</body>
</html>
※関連コンテンツ