イベントによる処理・・・jQueryが動くタイミング

jQueryで記述した「お願い」が実行されるのは、ブラウザがhtmlページを読み込んまれるのとほぼ同時だったり、webページ上の何か（ボタン画像など）をクリックしたときだったりします。
ページを読み込んだらすぐに実行させるには単純な処理でやったような「お願い」を羅列しておけばいいですが、クリックしたときに実行させるためには、jQueryでそのことを指定してから、処理を記述する必要があります。

クリックだとか、マウスオーバーだとか、webページ上でマウスによる動きが発生することをマウスイベントと言います。
マウスイベント以外にもいろいろイベント（きっかけ）がありますが、ここでは代表的なマウスイベントであるクリックを例に説明します。

sample

クリックしてね！

1回だけクリックに反応（ブラウザ再読み込みで、何度も確認できます）。

サンプルの解説

<p class="jq">クリックしてね！</p>

上のサンプルのhtmlはこうなっています。
jQueryのコードは以下の通り。

$(function(){
    $('.jq').click(function(){
        $(this).css('background-color','#ddf')
    });
})

セレクター（ここではclass[jq]）に対して、マウスイベントを指定して（ここではclick()）、function()に続く{}の中に処理（お願い）を書いています。

ちなみに、$(this)はイベントが発生したら処理をすると指定されているセレクター自身のこと（ここでは$('.jq')）を差します。thisを指定するときはクォーテーションはいらないです。

thisについては簡単に言ってしまうと上記のようなことなのですが、使っているうちに「あれ？」と思うことが出てくると思います。詳細を説明すると難しくなるので割愛しますが、気になるようであれば、google先生に訊いてみてください。

function(){}はjsをちょっとでもかじったことのある人なら、関数を定義するアレってことでおなじみのやつなんですが、jsの経験がない人はこれが何なのか気にせずにおまじない的に記述してください。

これだけでは1度クリックしてしまうと、ブラウザを再読み込みしない限りリセットされません（実際はクリックするたびに背景色を#ddfにしていますが、それを目で確認することはできません）。
人情としては、クリックのたびに背景色が切り替わってほしいところですが、その方法は別の機会にします。

ここでは、マウスイベントに対して処理をさせる記述形式を理解してください。

その他のマウスイベント

マウスイベントにはマウスオーバー（ロールオーバー）、マウスアウト（ロールアウト）、ダブルクリック・・・などいろいろあります。詳細は以下の参考サイトやgoogle先生を参照してください。
ちなみに、こういうのおぼえるのは、実際にやってみるのが一番です。

$(function(){
    $("button").click(function(){
        //クリックしたときの処理
    });
    //.click(function(){処理}); → セレクターをクリックしたら、処理を実行。

    $("button").dblclick(function(){
        //ダブルクリックしたときの処理
    });
    //.dblclick(function(){処理}); → セレクターをダブルクリックしたら、実行。
    //aタグでdblclick()を使うときは注意が必要（参考：http://ascii.jp/elem/000/000/450/450276/index-4.html）

    $("a").mousedown(function(){
        //マウスボタンを押したときの処理
    });
    //.mousedown(function(){処理}); → セレクターをマウスダウンしたら、実行。

    $("a").mouseup(function(){
        //マウスボタンを押して放した（ボタンが上がった）ときの処理
    });
    //.mouseup(function(){処理}); → セレクターをマウスアップしたら、実行。

    //大体同じだけど・・・clickとmousedownをmouseup の違いを意識する。
    //mousedown：ターゲットでマウスダウンがあるとイベント発生
    //mouseup  ：ターゲットでマウスアップがあるとイベントを発生
    //click    ：ターゲットでマウスダウンとマウスアップがあるとイベントを発生

    $("button").toggle(function(){
        //トグル処理1
    },function(){
        //トグル処理2
    },function(){
        //トグル処理3
    },function(){
        //トグル処理4
    });
    //.toggle(function(){処理1},function(){処理2},・・・,function(){処理n}); → セレクターに対して、1→2→・・・→n→1～のように処理をトグルさせる。
    //トグル・・・クリックするたびに指定した処理を順に繰り返す。

    $("img").mouseover(function(){
        //ロールオーバーしたときの処理
    }).mouseout(function(){
        //ロールアウトしたときの処理
    });
    //.mouseover(function(){処理}); → セレクターにマウスオーバーしたら、実行。
    //.mouseout(function(){処理}); → セレクターからマウスアウトしたら、実行。

    $("li").hover(
        function () {
            //ロールオーバーしたときの処理
         },
        function () {
            //ロールアウトしたときの処理
        }
    );
    //.hover(function(){処理},function(){処理}); → セレクターhoverの動作の際に実行。
    //mouseover()/mouseout()との違いは、hoverはセレクターの子要素は対象外であること。

    $("img").mousemove(function(e){
        //マウスが動いたときの処理
        $("p").html("現在のX座標：" + e.clientX + "
現在のY座標：" + e.clientY);
    });
    //).mousemove(function(){処理}); → セレクターの上でマウスが動いたら、実行。
    //イベントオブジェクト（この場合は指定した要素上で動くマウスポインタ）はclientX/clientYというプロパティを持つ。
    //ほかにpageX/pageYというプロパティもある。
    //違いはpageX/Yはページの左上を基準とし、clientX/Yはブラウザのドキュメント表示領域の左上を基準としている点。
    //参考→http://stacktrace.jp/jquery/api/events/mouseover%28fn%29.html）。
    //イベントオブジェクト.プロパティ
    //のように、「.」でつなげる。
    //参考→http://semooh.jp/jquery/api/events/mousemove/fn/
    //ここでは、img要素上で動くマウスポインタ（イベントオブジェクト）に「e」という変数を与え、eのx座標、y座標をそれぞれ取得し、p要素で表示させている。
    //この例ではhtml関数を使用しているが、text関数でもOK
})

その他のイベント

実をいうと、「イベント」はマウス以外にも「キーボードのキーを押した」とか「スクロールした」とかいろいろあります。
が、ここでは説明を省きます。詳しくはgoogle先生にお願いしてください。
キーボードのキーイベントは、ブラウザによって注意することがあったり、扱いがやや面倒です。
スクロールにも、ちょっと悩ませるあれやこれやがあるので、「あれ？」と思ったらgoogle先生に訊いてください。

また、「イベント委譲」と言って、上のようにセレクターに直にイベント（clickとか）を指定して処理をお願いするのではなく、one()とかbind()とかを使う方法があります。
複雑な処理をするときに便利ではあります。
が、これも理解するには、めんどくさい説明がいろいろいろいろありまして、なんだかわからなくなると思うので、省きます。
興味のある人は、google先生に訊いてみてください。

戻る

Top