イベント

ここでは jQuery でのイベントについて調べます。

• jQuery のイベントのまとめ
• 処理のタイミングを決めるイベント
• HTML が読み込まれたタイミングで実行する ready()
• クリック click() イベント
  • イベントが発生した要素を取得するセレクター $(this)
• ダブルクリック dblclick() イベント
• マウスのボタン操作を感知する mousedown()
• マウスのボタン操作を感知する mouseup()
• マウスオーバー／マウスアウト
• マウスの動きに合わせて処理を実行する mousemove()
• イベント発生時に一度だけ実施する
• 対象を絞ってイベントを登録する
• 設定されているイベントを取り消す

jQuery のイベントのまとめ

命令	意味
click()	クリック時に処理を実行するする
dblclick()	ダブルクリック時に処理を実行する
mousedown()	マウスのボタンが押された時に処理を実行する
mouseup()	マウスのボタンが離された時に処理を実行する
mouseover()	マウスオーバー時に処理を実行する
mouseout()	マウスアウト時に処理を実行する
mousemove()	マウスが移動したときに処理を実行する
one()	イベント発生時に一度だけ処理を実行する
on()	対象要素を絞ってイベントを登録する
off()	設定されているイベント処理を取り消す
keydown()	要素にフォーカスした状態で、キーボードのキーが押された時に処理を実行する
keyup()	要素にフォーカスした状態で、キーボードのキーが離れた時に処理を実行する
focus()	要素にフォーカスが当たった時に処理を実行する（フォーカスできる要素のみ）
blur()	要素からフォーカスが離れた時に処理を実行する（フォーカスできる要素のみ）
change()	入力内容が変更された時（textarea 要素、input 要素、select 要素など）
resize()	要素がリサイズされた時
scroll()	要素がスクロールされた時

処理のタイミングを決めるイベント

jQuery プログラムが実行されるきっかけをイベントと言います。プログラムではイベントの発生を感知したタイミングで、設定しておいた処理が実行されます。これを記述する方法は次のようになります。

• イベントと処理命令の記述 の仕方
  • $(セレクタ).イベント(function(){
  • 　　HTML が読み込まれた時に実行する処理
  • });

１．HTML が読み込まれたタイミングで実行する ready() イベント

ブラウザーがWebページを読み込み終わった、というきっかけもイベントです。このイベントをきっかけに実行する処理を記述すると次のようになります。

• ready タイミングで処理を実行する
  • $(document).ready(function(){
  • 　　HTML が読み込まれた時に実行する処理
  • });

ready() は、HTML の読み込みが完了した、というイベントを感知する命令です。セレクタ $(document) は、Webページ全体（document）を対象にしています。従って、「Webページ全体の読み込みが終わり、準備ができたら処理を実行しなさい」という命令になります。

ready(…) の括弧には function(){…} と記述するきまりとなっております。括弧 {…} の内側には実行する処理を記述します。この記述方法は、ready() イベントに限らず、処理の実行を記述する方式として一貫しております。

ready イベントの記述の省略形として、次のように記述することになっています。

• ready タイミングで処理を実行する 記述の省略形
  • $(function(){
  • 　　HTML が読み込まれた時に実行する処理
  • });

他のイベント処理でも ready() は必須

他のイベントを感知したい場合でも、まず ready タイミングで処理を実行する必要があります。そのためには省略形である $(function(){…} の内側に処理の内容を記述します。

これが行われない時は、ブラウザがスクリプトを読んだ段階ですぐに処理を実行しようとし、ページの読み込みが終わっていない時点で処理を実行することとなり、希望通りの結果が出ません。

• ready(function(){…} が無いスクリプト記述
  • <script>
  • 　$("button").click(function(){
  • 　　button 要素がクリックされた時に実行する処理
  • 　});
  • </script>

これを、スクリプト全体を $(function)(){…} の内側に記述に変更します。

• ready(function(){…} でスクリプト記述
  • <script>
  • 　$(function(){
  • 　　$("button").click(function(){
  • 　　　button 要素がクリックされた時に実行する処理
  • 　　});
  • 　});
  • </script>

こうすることで、ブラウザは script 要素の記述位置に関係なく、button 要素を発見でき、処理はページの読み込みが終わった後に実行されます。

２．click イベント

click() は、特定の要素がクリックされた時に何らかの処理を実行する命令です。

click() の基本の書き方

• JavaScript
  • 　$(セレクタ).click(function(){
  • 　　セレクタで指定した要素がクリックされたときに実行する処理
  • 　});

例：ボタンをクリックして画像を変更する

• JavaScript
  • 　$(function(){
  • 　　$("button").click(function(){
  • 　　　$("img").attr("src","sea.jpg").attr("alt","海");
  • 　　});
  • 　});

• HTML（実行前）
  • 　<button>画像を変更</button>
  • 　<p><img src="flower.jpg" alt="花"></p>
• 　　　 (実行時)
  • 　<button>画像を変更</button>
  • 　<p><img src="sea.jpg" alt="海"></p>

• ボタンをクリックすると画像が入れ替わります。

イベントが発生した要素を取得する

複数の要素に対して設定したクリックイベントで、イベントが発生した要素を取得するセレクタ $(this) を使います。

• JavaScript
  • 　$(function(){
  • 　　$("a").click(function(){
  • 　　　$("img").attr("src",$(this).attr("href"))
  • 　　　　　　　.attr("alt",$(this).text());
  • 　　　return false; 　　　← 下記ヒントを参照
  • 　　});
  • 　});

• 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>

• 解説
  • クリックされた要素の href 属性を $(this).attr("href") で、クリックされた要素内のテキストを $(this).text() で取得し、img 要素の src 属性、alt 属性にそれぞれ設定します。

イベントが発生した要素を取得する $(this) は click イベント以外でも重宝します。

３．ダブルクリックイベントを感知する dblclick()

特定の要素がダブルクリックされた時に何らかの処理を実行するには、dblclick() を使います。カッコ内に function(){…} を書き、その中に実行する趣里を記述します。

• JavaScript
  • 　$(セレクタ).dblclick(function(){
  • 　　セレクタで指定した要素がダブルクリックされた時に実行する処理
  • 　});

サンプル１：

button 要素がダブルクリックされたときに、img 要素の src 属性の値を sea.jpg に、alt 属性の値を海に書き換えます。

• JavaScript
  • 　$(function(){
  • 　　$("button").dblclick(function(){
  • 　　　$("img").attr("src","sea.jpg").attr("alt","海");
  • 　　});
  • 　});

• HTML（実行前）
  • 　<button>画像を変更</button>
  • 　<p><img src="flower.jpg" alt="花"></p>
• 　　　 (実行時)
  • 　<button>画像を変更</button>
  • 　<p><img src="sea.jpg" alt="海"></p>

サンプル２：a 要素を dblclick() する

a 要素にダブルクリックイベントを設定した場合、２回目のクリックの後で初めて処理が実行されます。ところが、ブラウザは一回目のクリックで click() イベントを感知し、a 要素のリンクの処理をすぐに実行してしまいます。

これを回避するには、a 要素に dblclick イベントを設定する処理は、click() と dblclick() の両方のイベント処理を設定します。

dblclick() にはダブルクリック時に実行する処理を設定し、click() には return false; を設定し、１回目のクリック時のリンクを無効にします。

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

４．マウスのボタン操作を感知する mousedown()

mousedown() と mouseup() は、特定の要素上でマウスの何らかのボタン（右ボタン／左ボタン／中ボタン）が押されたり離されたりしたときに、処理を実行します。

mousedown() と mouseup() は、主にドラッグ＆ドロップのような操作を表現する場合に使います。

mousedown()

• mousedown() は、特定の要素上にマウスカーソルがある状態で、マウスのボタンが押された時の処理を実行します。

• JavaScript
  • 　$(セレクタ).mousedown(function(){
  • 　　セレクタで指定した要素でマウスダウンされた時に実行する処理
  • 　});

mousedown() の例

• a 要素上にマウスカーソルがある状態でマウスのボタンが押されたら、img 要素の src 属性と alt 属性を書き換えます。

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

５．マウスのボタン操作を感知する mouseup()

• mouseup() は、特定の要素上にマウスカーソルがある状態で、既に押されているマウスのボタンが離されたタイミングでの処理を実行します。

• JavaScript
  • 　$(セレクタ).mouseup(function(){
  • 　　セレクタで指定した要素でマウスアップされた時に実行する処理
  • 　});

mouseup() の例

• a 要素上にマウスカーソルがある状態でマウスのボタンが離されたら、img 要素の src 属性と alt 属性を書き換えます。

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

６．マウスオーバー／マウスアウトを感知する

mouseover() と mouseout() は、特定の要素上にマウスが重なったタイミングを感知して、処理を実行します。

mousedown() と mouseup() は、多くの場合ロールオーバー効果などの用途で組み合わせて使います。

mouseover()

• mouseover() は、特定の要素上にマウスカーソルが重なった時に処理を実行します。

• JavaScript
  • 　$(セレクタ).mouseover(function(){
  • 　　セレクタで指定した要素にマウスカーソルが重なった時に実行する処理
  • 　});

mouseout()

• mouseout() は、特定の要素上からマウスカーソルが外れた時に処理を実行します。

• JavaScript
  • 　$(セレクタ).mouseout(function(){
  • 　　セレクタで指定した要素からマウスカーソルが外れた時に実行する処理
  • 　});

例

• img 要素上にマウスカーソルが重なると src 属性の値を sea.jpg に、alt 属性を「海」に書き換えます。マウスカーソルが img 要素から外れると src 属性の値を flower.jpg に、alt 属性の値を「花」に書き換えます。

• JavaScript
  • 　$(function(){
  • 　　$("img").mouseover(function(){
  • 　　　$(this).attr("src","sea.jpg").attr("alt","海");
  • 　　}).mouseout(function(){
  • 　　　$(this).attr("src","flower.jpg").attr("alt","花);
  • 　　});
  • 　});

• HTML（実行前）
  • 　<img src="flower.jpg" alt="花">

７．マウスの動きに合わせて処理を実行する

mousemove() は、特定の要素上でマウスカーソルが動いた時に処理を実行できます。

mousemove() は、座標などの情報を取得する命令と組み合わせるケースがほとんどです。

mousemove()

• JavaScript
  • 　$(セレクタ).mousemove(function(){
  • 　　セレクタで指定した要素上でマウスカーソルが動いた時に実行する処理
  • 　});

• JavaScript
  • 　$(セレクタ).mousemove(function(e){
  • 　　セレクタで指定した要素上でマウスカーソルが動いた時に実行する処理
  • 　});
  mousemove() 内のfunction() を function(e) にすると、イベント発生時に、e.clientX で現在のマウスのX座標、e.clientY でマウスのY座標を取得できます。X座標とY座標は、ブラウザの左上からマウスカーソルまでの距離をピクセル単位で表したものです。

使用例

サンプルは、img 要素上でマウスカーソルが動いている場合に、カーソルのX座標とY座標を p 要素に書き出すものです。

• JavaScript
  • 　$(function(){
  • 　　$("img").mousemove(function(e){
  • 　　　$("p").html("現在のX座標："+e.clientX+"<br>
  • 　　　　　　　　　"現在のY座標："+e.clientY);
  • 　　});
  • 　});

• HTML（実行前）
  • 　<img src="flower.jpg" alt="花">
  • 　<p></p>

• 画像上でマウスカーソルを動かすと、現在の座標位置が表示される。

８．イベント発生時に一度だけ処理を実行する

one() は、指定した要素で発生したイベントに対して、一度だけ処理を実行するように設定します。

one()

• JavaScript
  • 　$(セレクタ).one("イベント発生の条件",function(){
  • 　　イベント発生時に実行する処理
  • 　});

• one() のカッコ内にはイベント発生の条件を記述します。イベント発生の条件には、click、dblclick、mouseup、mousedown、mouseover、mouseout、mousemove などの命令を指定します。その後ろを , （カンマ）で区切り、function(){…} に実行したい処理を記述します。

使用例

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

• HTML（実行前）
  • <ul>
  • 　<li><a hre="flower.jpg">花</a></li>
  • 　<li><a hre="sea.jpg">海</a></li>
  • 　<li><a hre="jellyfish.jpg">くらげ</a></li>
  • 　<li><a hre="building.jpg">建物</a></li>
  • </ul>
  • <p><img src="flower.jpg" alt="花"></p>

• リンク文字をクリックすると最初は画像が切り替わる。もう一度クリックするとリンク先のURLに移動する。

９．対象要素を絞ってイベントを登録する

on() は、これまでのイベントを別の書き方で設定できるメソッドです。

on() そのⅠ

• JavaScript
  • 　$(セレクタ).on("イベント発生の条件",function(){
  • 　　イベント発生時に実行する処理
  • 　});

• on() のカッコ内にはイベント発生の条件を記述します。イベント発生の条件には、click、dblclick、mouseup、mousedown、mouseover、mouseout、mousemove などの命令を指定します。その後ろを , （カンマ）で区切り、function(){…} に実行したい処理を記述します。

使用例Ⅰ

• a 要素がクリックされると、img 要素の src 属性と alt 属性を書き換えます。

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

• 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>

• リンク文字をクリックすると最初は画像が切り替わる。もう一度クリックするとリンク先のURLに移動する。

サンプルの on("click",function(){…}) は click(function(){…} と同じ動きをします。ところが on() には別の機能もあります。

on() その２

on() には、イベントが発生する要素を指定できます。

• JavaScript
  • 　$(セレクタ).on("イベント発生の条件","イベントが発生する要素",function(){
  • 　　イベント発生時に実行する処理
  • 　});

これにより、イベント設定時には存在していなかった要素にもイベントの処理を適用することができます。

使用例２

• イベントが発生する要素を追加します。

• JavaScript
  • 　$(function(){
  • 　　$("ul").on("click","a",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>");
  • 　　});
  • });

• 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>

• ul 要素内の a 要素がクリックされたときに、img 要素の src 属性と alt 属性を書き換えます。
• こうした処理を、HTML が読み込まれた時点では存在していない「建物」にもイベント処理を適用することができます。

１０．設定されているイベント処理を取り消す

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

off()

• JavaScript
  • 　$(セレクタ).off("イベント発生の条件")

使用例

• a 要素がクリックされると、img 要素を書き換える処理が設定されています。［取り消し］と書かれた button 要素がクリックされると、a 要素のイベントを取り消します。
• a 要素は、button 要素がクリックされる前は画像切り替えとして機能し、button 要素がクリックされた後は a 要素によるリンクに戻ります。

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

• 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>

• a 要素がクリックされると、img 要素を書き換える処理が設定されています。
• ［取り消し］と書かれた button 要素がクリックされると、a 要素のイベントを取り消します。
• a 要素は、button 要素がクリックされる前は画像切り替えとして機能し、button 要素がクリックされた後は a 要素によるリンクに戻ります。

次に、jQuery の命令 を見てみましょう。