【jQuery入門】イベント を使ってみよう

クリックイベントなどを扱う方法について見ていきます。

click

クリックしたときのイベントを設定できます。下記はクリックしたときにhiと表示する例です。

$(function(){
$('#box').click(function(){
alert("hi!");
});

mouseover

マウスオーバーしたときのイベントを設定できます。下記は背景色を緑にする例です。

$('#box').mouseover(function(){
$(this).css('background','green');
});

mouseoverのイベント（function以降）は、対象物に対してのイベントのため、「this」で表すことができるのがポイントです。なお、マウスアウトしても緑から元に戻りませんのでマウスアウトした際に元に戻したい場合はマウスアウトの設定を併せて行う必要があります。

mouseout

マウスアウトしたときのイベントを設定できます。下記はマウスオーバーで背景色を緑にし、マウスアウトした際に赤にしています。

$('#box').mouseover(function(){
$(this).css('background','green');
});

$('#box').mouseout(function(){
$(this).css('background','red');
});

 mousemove

対象物内でマウスを動かした際の処理を設定できます。なお下記コードはX座標を表示させる例です。

$('#box').mousemove(function(e){
$(this).text(e.pageX);
});

Event Objectを使用しています。Event Objectの詳細は公式サイトのEvent Object | jQuery API Documentationを参照ください。