jQueryのイベントをチュートリアルで学ぶ（後編）

イベント発生時に一度だけ命令を実行する one()

　指定した要素で発生したイベントに対して、一度だけ実行する命令を設定できるのが one() です。


$(セレクター).one("イベント発生の条件",function(){//イベント発生時に実行する命令
})

　one() の括弧内にはイベント発生の条件を指定します。イベント発生の条件には、ここまでに説明してきた click や dblclick、mouseup、pusedown、mousemove、mouseout、mousemove などを記述します。その後を,（カンマ）で区切り、 function(){...} に実行したい命令を書きます。

　次のサンプルでは、a要素がクリックされたときに、一度目は画像が切り替わり、二度目はa要素に設定されているリンク先に移動します。

▼サンプル14（スクリプト部分）


$(function(){$("a").one("click",function(){$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());return false;})
})

▼サンプル14（(X)HTML部分）


<ul><li><a href="flower.jpg">花</a></li><li><a href="sea.jpg">海</a></li><li><a href="Jellyfish.jpg">くらげ</a></li><li><a href="Building.jpg">建物</a></li>
</ul>
<p><img src="flower.jpg" alt="花" /></p>

▼サンプル14（実行結果）


サンプル14の実行画面。a要素をクリックすると最初は画像が切り換わる。2度目はa要素に設定されたリンクに移動する

設定されているイベント処理を取り消す unbind()

　unbind() は、設定されているイベント処理を取り消す命令です。


$(セレクター).unbind("イベント発生の条件");

　次のサンプルは、a要素がクリックされると、img要素を書き換える命令が設定されています。ただし、button要素がクリックされると unbind() でa要素のイベントが取り消されます。a要素はbutton要素がクリックされる前は画像切り替えとして機能し、button要素がクリックされた後はa要素によるリンクに戻ります。

▼サンプル15（スクリプト部分）


$(function(){$("a").click(function(){$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());return false;})$("button").click(function(){$("a").unbind("click")})
})

▼サンプル15（(X)HTML部分）


<button>取り消し</button>
<ul><li><a href="flower.jpg">花</a></li><li><a href="sea.jpg">海</a></li><li><a href="Jellyfish.jpg">くらげ</a></li>
</ul>
<p><img src="flower.jpg" alt="花" /></p>

Read more: http://ascii.jp/elem/000/000/450/450626/#ixzz20Pchyiin
サンプル15の実行画面。「取り消し」ボタンをクリックすると設定されているイベン
Read more: http://ascii.jp/elem/000/000/450/450626/#ixzz20PcsmIAH

将来追加される要素にイベント処理を設定できる live()

　現在と将来追加される要素に対して、イベント処理を設定できるのが live() です。「将来追加される要素」と聞くとちょっと分かりにくいですね。以下のソースコードを見てください。

▼サンプル16（スクリプト部分）


$(function(){$("a").click(function(){$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());return false;})$("button").click(function(){$("ul").append("<li><a href="Building.jpg">建物</a></li>")})
})

▼サンプル16（元の(X)HTML部分）


<button>li要素を追加</button>
<ul><li><a href="flower.jpg">花</a></li><li><a href="sea.jpg">海</a></li><li><a href="Jellyfish.jpg">くらげ</a></li>
</ul>
<p><img src="flower.jpg" alt="花" /></p>

　このプログラムでは、（1）a要素がクリックされると画像を切り換える命令、（2）button要素がクリックされるとul要素に対して新しいli要素（a要素を含む）を追加する命令、の2つが設定されています。さてこの場合、（2）のイベント処理のあとに（1）を実行するとどうなるでしょうか？　button要素をクリックしたことで追加された「建物」のa要素をクリックすると、画像は切り換わるのでしょうか？

　答えは×です。「花」「海」「くらげ」のa要素をクリックすると画像は切り換りますが、「建物」のa要素をクリックしても画像は切り換わらず、a要素のhref属性に記述されているリンク先に移動してしまいます。

▼サンプル16（実行結果）


サンプル16。button要素をクリックすると追加される「建物」には、a要素を対象としたイベントの処理が適用されない

　理由は、a要素に対してイベント処理が設定されたタイミングです。a要素のイベントの処理は、 $(function(){...}) で(X)HTMLがブラウザーに読み込まれた時点に設定されています。この段階では、(X)HTMLには「建物」のa要素は存在していません。

　こうした、イベント設定当時には存在していなかった要素に対してもイベントの処理を適用できるのが、live() です。


$(セレクター).live("イベント発生の条件",function(){//実行したい命令
})

　たとえば先のスクリプトの場合、次のように記述すれば、(X)HTMLが読み込まれた段階では存在していない「建物」にも、イベント処理を設定できます。

▼サンプル17（スクリプト部分）


$(function(){$("a").live("click",function(){$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());return false;})$("button").click(function(){$("ul").append("<li><a href="Building.jpg">建物</a></li>")})
})

▼サンプル17（実行結果）


サンプル17。button要素をクリックすると追加される「建物」にも、a要素を対象としたイベントの処理が適用される

jQueryのイベントのまとめ

　最後に、第6回～7回で解説したjQueryのイベントを表にまとめます。

命令	意味
click()	クリック時に命令を実行する
dblclick()	ダブルクリック時に命令を実行する
mousedown()	マウスのボタンが押された時に命令を実行する
mouseup()	マウスのボタンが離された時に命令を実行する
toggle()	クリックされるたびに異なる命令を実行する
mouseover()	マウスオーバー時に命令を実行する
mouseout()	マウスアウト時に命令を実行する
mousemove()	マウスが移動したときに命令を実行する
one（）	イベント発生時に一度だけ命令を実行する
unbind()	設定されているイベント処理を取り消す
live()	将来追加される要素にイベント処理を設定する

◆

　セレクター、(X)HTML/CSSを操作する命令、イベント――とひととおり解説してきたjQueryの基本的な要素についてはここまでです。この間、さまざまなサンプルを紹介してきましたので、ぜひ実際に動かしながら、jQueryを使ったプログラムを書く感覚をつかんでおいてください。

　次回はjQueryを使ったフォームの制御方法について解説します。

Read more: http://ascii.jp/elem/000/000/450/450626/#ixzz20PfIA3Vt