THE HAM MEDIA BLOG

jQueryメモ:bindとtriggerを勉強中 その2

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
bind
Trigger

bindとtriggerを勉強中 その2

本日もbindとtriggerの勉強の続き。以前に買った『jQueryで作る Ajaxアプリケーション』を読んでいたら、bindとtriggerについて書いてありましたので、今回はそれで勉強。



bindとtriggerと名前空間

■サンプルHTML

<div id="test1">
<p>
    <button id="trigger-click">すべてのclickを実行</button>
    <button id="trigger-content">contentのイベント処理</button>
    <button id="trigger-reset">元に戻す</button>
</p>
<div class="square">divによる要素(content)</div>
<p class="square">pによる要素(square)</p>
<span id="description">名前空間でまとめられた要素に対して一括にイベント処理を実行できます。(content)</span>
</div>

■サンプルスクリプト

※本内のスクリプトをこのブログ用にして使ってます。

$('div#test1 div.square').bind('click.content',function(e){
    $(this).hide();
});
$('div#test1 span').bind('click.content',function(e){
    $(this).hide();
});
$('div#test1 p.square').bind('click.square',function(e){
    $(this).hide();
});
$('div#test1 button#trigger-click').click(function(e){
	$('div#test1 :not(button)').trigger('click');
});
$('div#test1 button#trigger-content').click(function(e){
	$('div#test1 *').trigger('click.content');
});
$('div#test1 button#trigger-reset').click(function(e){
	$('div#test1 *').show();
});

■名前空間について

今回のサンプルで新たに学んだのが「名前空間」。

イベント処理を登録するとき、イベント名に名前を付しておくと、イベント処理が実行される範囲を名前空間で指定できます。

とのこと。つまり「'イベント.名前空間'」とすることで、イベント処理の分別ができるということのようだ。

サンプルでは、clickイベントにcontentという名前空間と、squareという名前空間がついているものがあり、真ん中のボタンを押すと、名前空間がcontentになっているものだけが反応するようになっているようだ。なるほど!

これでいろいろなプラグインとかで使われている、イベント名についているものが名前空間だということがわかった。

■スクリプトについて

サンプルスクリプトはbindで、ブロックのように扱っている要素をクリックしたときに消える処理を指定している。通常のclick処理と違って、名前空間を付しているのもポイント。triggerでは、click処理をつけたところを全部一度に動作させるボタン(一番左)と、名前空間をcontentにしたclickだけを動作させるボタン(一番左)と、クリックしたら全部表示させるボタンの設定がされている。

■サンプルデモ

divによる要素(content)

pによる要素(square)

名前空間でまとめられた要素に対して一括にイベント処理を実行できます。(content)

ブロックをクリックすると、クリックしたエリアが消え、ボタンを押すと、それぞれの処理が行われます。

うーむ、jQuery1.2.3の時の本ですが、まだまだ学ぶことは多いなーと判明。もう一度じっくり読んでみようと思います。

jQueryで作る Ajaxアプリケーション
jQueryで作る Ajaxアプリケーション



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。