このページの本文へ

DESIGN Web制作の現場で使えるjQuery UIデザイン入門 ― 第7回

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

2009年08月19日 18時46分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第7回です。過去の記事もご覧ください。


(前編からの続き)


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

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


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

 one() の括弧内にはイベント発生の条件を指定します。イベント発生の条件には、ここまでに説明してきた clickdblclickmouseuppusedownmousemovemouseoutmousemove などを記述します。その後を,(カンマ)で区切り、 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
サンプル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>

サンプル15(実行結果)

サンプル14
サンプル15の実行画面。「取り消し」ボタンをクリックすると設定されているイベント処理が削除される
jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング