jQueryでイベントを操作する方法

ここではjQueryでイベントを操作する方法を説明します。

■readyイベント $(function(){})

readyイベントは、WEBページの読み込み終了後に動作させてたい処理を記述する。 
$(function(){
  //なんらかの初期化処理を記述する
  //WEBページ読み込みが終わり、準備できたら処理しなさいという命令
  })

■clickイベント .click()

clickイベントは、対象要素がクリックされたときに動作するイベント。 
$("button").click(function(){
            $("img").attr("src","sea.jpg").attr("alt","海");
            });

■ダブルclickイベント .dblclick()

dblclickイベントは、対象要素がダブルクリックされたときに動作するイベント。 
$("a").dblclick(function(){
            $("img").attr("src","sea.jpg").attr("alt","海");
            })
            .click(function(){return false});
            //ダブルクリックイベントは、2回のクリックイベント後に発生する。
            //そのためA要素のクリックイベントでA要素の遷移を無効化する必要がある。
DBLClick画像を変更

■マウスのボタン操作を制御する .mousedown(), .mouseup()

mousedownイベントは、対象要素にマウスが押されたときに発生するイベント。
mousedownイベントは、対象要素にマウスが離されたときに発生するイベント。
 
$("a").mousedown(function(){
        $("img").attr("src","sea.jpg").attr("alt","海");
      })
      .mouseup(function(){
        $("img").attr("src","forest.jpg").attr("alt","森");
      })
      .click(function(){
        return false; //リンク機能を無効化する
      });
mousedownとmouseup

■クリックされる度に処理を変える .toggle()

toggleイベントは、クリックされるたびに動作させる処理を記述する。
 
$("button").toggle(function(){
             $("img").attr("src","sea.jpg"); //処理1回目
           },function(){
             $("img").attr("src","sea.jpg"); //処理2回目
           }, function(){
             $("img").attr("src","sea.jpg"); //処理3回目
           )};
           4回目以降は、1回目処理に戻る

■マウスオーバー・マウスアウトを感知する .mouseover(), .mouseout()

mouseoverイベントは、対象要素にマウスが乗ったときに発生するイベント。
mouseoutイベントは、対象要素の範囲内から範囲外にマウスが離されたときに発生するイベント。
 
$("img").mouseover(function(){
          $(this).attr({
                        src : "sea.jpg",
                        alt : "海"
                       });
        })
        .mouseout(function(){
          $(this).attr({
                        src : "forest.jpg",
                        alt : "森"
                       });
        });

■マウスの動きに合わせて処理を行う .mousemove()

mousemoveイベントは、対象要素上でマウスが動いたときに発生するイベント。
 
$("img").mousemove(function(e){
          $("p").html("現在のX座標：" + e.clientX + "<br>" + 
                      "現在のY座標：" + e.clientY);
        });

■イベント発生時に1度だけ処理を行う .one()


oneイベントは、対象要素にに登録するイベントを一度のみ処理する。


$("button").one("click",function(){
             $("image").attr({
                              src : "sea.jpg",
                              alt : "海"
                             });
           });

■設定されている処理を取り消す .unbind()

unbindイベントは、対象要素に登録されているイベントを消去する。
 
$("button").unbind("click");

■あとで追加する要素にもイベントを登録する .live()

liveイベントは、イベント追加のJavaScriptの後で、イベント追加となる要素が追加された場合、 その追加された要素にもイベントを追加するイベント。 
$("a").live("click",function(){
          $("img").attr({
                         src : "forest.jpg",
                         alt : "森"
                        });
          return false;
      });
$("span").append("<a>変更</a>");この要素にもクリックイベントが登録される
画像を変更
 inserted by FC2 system