jQueryのマウス操作のイベントをまとめてみる

マウス操作に関するイベントをまとめてみました。まとめたイベントはmouseover/mouseout、mousedown/mouseup、click、mousemoveです。mousedown/mouseupとclickの違いなど自分の中で少しあいまいな部分があったのですが、今回まとめてみて区別できるようになったのでよかったです。

マウスイベントのまとめ

まずはマウスイベントに限ったことではないんですが、イベント処理の一般的な記述の仕方です。こんな感じで書きます。

$(セレクター).イベント(function(){
    イベント発生時の処理
});

これだけで色々なイベントを操作できるっていうのはとても簡単ですね。

mouseover/mouseout

mouseoverとmouseoutを使えば、ある要素にマウスが乗った時とマウスが離れた時によって処理を分けたりすることができます。そのまんまですね。以下のように使います。

$(function(){
    $('#sample')
    .mouseover(function(){
        $(this).css('background-color', 'Blue');
    })
    .mouseout(function(){
        $(this).css('background-color', 'Red');
    })
});

マウスが#sampleに乗ったら背景を青に変更し、マウスが離れたら赤になります。まあこれだけだったらCSSに書いた方がいいですけど。結構使う機会がありそうな感じです。

mousedown/mouseup

mousedownはマウスボタンが押下された時に発生するイベントで、mouseupはマウスボタンが離された時に発生するイベントです。clickと何が違うのって感じがするので調べてみるとどうやらクリックは押されて離した時に発生するイベントみたいです。以下簡単な使い方です。

$(function(){
    $('#sample')
    .mousedown(function(){
        $(this).css('background-color', 'Blue');
    })
    .mouseup(function(){
        $(this).css('background-color', 'Red');
    })
});

これで、#sampleという要素がマウスボタンで押下された時に背景が青になりマウスボタンを離したら赤になります。ついでに似ているclickも見てみます。

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

mousedown/mouseupと違い、マウスボタンを押して離したタイミングで#sample要素の背景が青になります。ちなみに全然関係ないですがこんな感じで色々と変数にも格納できます。

$(function(){
    var sample = $('#sample');
    var sampleclick = function(){
        $(this).css('background-color', 'Blue');
    };
    sample.click(sampleclick);
});

mousemove

mousemoveを使えば指定した要素上の座標なんかを知ることができます。例えばこんな感じです。

JavaScript

$(function(){
    $('#sample').mousemove(function(e){
        var x = e.pageX;
        var y = e.pageY;
        $('p').text('Xは' + x + '/Yは' + y);
    });
});

HTML

<div id="sample"><p></p></div>

CSS

#sample {
     width: 500px;
     height: 500px;
     background: #ccc;
}

これでdiv#sample上をマウスポインターが動くたびに現在の座標位置を知ることができます。引数eのイベントオブジェクトの中に座標の情報など色々入っているみたいです。これにより座標の数値によって背景を変えたりなんてことも簡単にできますね。

$(function(){
    $('#sample').mousemove(function(e){
        var x = e.pageX;
        var y = e.pageY;
        $('p').text('Xは' + x + '/Yは' + y);
        if (x > 250 && y > 250) {
            $('#sample').css('background-color', 'Blue');
        } else {
            $('#sample').css('background-color', 'Red');
        };
    });
});

上記は座標xとyが250以上なら背景が青になり、それ以外なら赤になるといったコードです。

終わりに

とりあえずイベントに関してはマウス操作だけでも色々あるので、全部覚えるには大変っすね。まあ全部覚える必要はないかと思いますが。他にもフォームに関するイベントなど色々あるので、少しずつ試してみようかと思います。