jQuery 02-01: マウスに関連したイベントハンドラ

●clickイベント

大抵のインタラクティブコンテンツで必要になるのがクリックのイベントハンドラです。
1章で学んだreadyのイベントハンドラと考え方は同じで、構文も似ています。
まずは構文を確認しましょう。

 $("div.testDiv").click(function () {
  //ここにクリックされたら実行したい処理を書きます。					
 });

readyのイベントハンドラと同様にjQuery(ここでは$と省略)の後にセレクタを指定し
(サンプルではtestDivクラスのdiv要素).(ドット)を挟んでイベント名のclickを書き、
続く()とfunctionの構造は全く同じです。クリックしたら実行したい処理をfunctionの
{ }の中に書きます。
 
ではサンプルで本当にクリックが取得できるか確認しましょう。

sample : クリックしたらdivに文字を表示する
http://www.designdrill.jp/jquery/02/step01.html
※clickのイベントハンドラもreadyのイベントハンドラ内に書きます。

 
イベントの構文は慣れないと混乱しやすいので気を付けましょう。()の中にfunctionの
構造が入ることを忘れないようにします。つづいてはcssでもおなじみのhoverです。
 
 

●hoverイベント

hoverの機能はcssのものと同じですが、構文は異なりイベントハンドラの構文となります。
しかも、前述のclickやreadyとことなりイベントハンドラ内にいれるfunctionが2つになります。
※注意点として最初のfunctionの}の後ろにカンマを付けることを忘れないでください
 (下のコードでは赤字にしてあります)。

 $("div.testDiv").hover(
  function () {
   //マウスが上にのった時に実行したい処理を書きます。					
  },
  function () {
   //マウスが外れた時に実行したい処理を書きます。					
  }
 );

ではサンプルで本当にクリックが取得できるか確認しましょう。

sample : マウスオーバーとマウスアウト時にdivに文字を表示する
http://www.designdrill.jp/jquery/02/step02.html
※最初のfunctionの後ろに付けるカンマを忘れないようにしましょう。

 
それでは、これを利用してロールオーバーボタンを作成しましょう。
step03.htmlを開いてソースを確認してください。hoverのイベントハンドラはstep02.htmlと
全く同じです。ここで着目すべきはjQuery 01-06で紹介したattrメソッドを利用して
imgのsrc属性を変更して画像を変えている点だけです。
http://www.designdrill.jp/jquery/02/step03.html
 
このテクニックは実用的にも見えますが、今はcssで作成することの方が多いと思います。
そのほうがjavaScriptがoffの環境でも利用できますから。jQueryはcssでできることを
実現するのではなく簡単なFlashコンテンツを置き換える手段として考えた方が良いと思います。
googleによる検索結果(css ロールオーバー)

 
 

● toggleイベント(スイッチボタン)

トグル処理とは「クリック毎に異なる処理をすること」を指します。身近な例ではスイッチボタン
が該当します。例えばサウンドのON / OFFでは一回クリックするとサウンドをON、次にクリック
するとOFFになります。構文はhoverのイベントハンドラ同様に中に2つのfunctionを持ちます。
step04.htmlではクリックする度にcssの設定を変更して、divの背景色を青/赤と切り替えます。
http://www.designdrill.jp/jquery/02/step04.html
 
このtoggleイベントにはhoverイベントの構文とは異なる仕様があります。それは中に入れる
functionは2つより多くても良いという点です。その場合、クリックされる度に先に書いた
functionから順々に実行していきます。以下のstep05.htmlのソースを確認し、クリックする
たびに先のfunctionから順々に実行されることを確認してください。
最後のfunction以外は}の後ろにカンマが必要になるので忘れないようにしましょう。
http://www.designdrill.jp/jquery/02/step05.html
 
 
次回からは演出に関連したメソッドを紹介していきます。
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


9 × = 五十 四


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>