【jQuery】イベント-マウスイベント・フォームイベント

jQueryには様々なイベントが用意されています。
イベントというのは例えばクリックされたときにどうするかとか、値が変わった時にどうするかなどを指定するためのものです。
イベントには
・マウスを操作したときに発生するマウスイベント
・フォームに関するフォームイベント
・キー操作をしたときに発生するキーイベント
・ブラウザに関連したイベント時の処理をするブラウザイベント
・読み込みに関連するロードイベント
などがあります。
沢山のイベントが用意されているのですが、今日はマウスイベントとフォームイベントについて見ていきたいと思います。

マウスイベント

click	クリックされた時の処理を設定
dblclick	ダブルクリックされた時の処理を設定
mousedown	マウスボタンを押した時の処理を設定
mouseup	マウスボタンを離した時の処理を設定
mouseover	マウスカーソルが要素に入った時の処理を設定
mouseout	マウスカーソルが要素から出た時の処理を設定
moseenter	マウスカーソルが要素に入った時の処理を設定
mouseleave	マウスカーソルが要素から出た時の処理を設定
mousemove	マウスカーソルが動いた時の処理を設定
hover	マウスカーソルが要素内に出入りした時の処理を設定

実際の使い方を例をあげてみていきます。

click

$(“要素”).click(function(){
//処理を書く
});

クリックしてみて下さい。

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").click(function(){
		$(this).css("background","yellow");
	});
</script>

ボックスをクリックするとグレーのボックスが黄色になります。

dblclick

$(“要素”).dblclick(function(){
//処理を書く
});

ダブルクリックしてみて下さい。

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").dblclick(function(){
		$(this).css("background","yellow");
	});
</script>

ボックスをダブルクリックするとグレーのボックスが黄色になります。

mousedown

$(“要素”).mousedown(function(){
//処理を書く
});

マウスボタンを押してみて下さい。

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").mousedown(function(){
		$(this).css("background","yellow");
	});
</script>

ボックスの上でマウスのボタンを押すとグレーのボックスが黄色になります。

mousedown

$(“要素”).mouseup(function(){
//処理を書く
});

マウスボタンを押した後ボタンを離して下さい。

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").mousedown(function(){
		$(this).css("background","yellow");
	});
	$("#box").mouseup(function(){
		$(this).css("background","red");
	});
</script>

ボックスの上でマウスのボタンを押すとグレーのボックスが黄色になり、マウスボタンを話すと赤色になります。

mouseover

$(“要素”).mouseover(function(){
//処理を書く
});

ボックスの上にカーソルを置いて下さい

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").mouseover(function(){
		$(this).css("background","yellow");
	});
</script>

ボックスの上にカーソルを当てるととグレーのボックスが黄色になります。

mouseout

$(“要素”).mouseout(function(){
//処理を書く
});

ボックスの上にカーソルを当てた後ボックス外にカーソルを移動させて下さい

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").mouseover(function(){
		$(this).css("background","yellow");
	});
	$("#box").mouseout(function(){
		$(this).css("background","red");
	});
</script>

ボックスの上にカーソルを当てるととグレーのボックスが黄色になり、ボックスの外にカーソルを移動させると赤色になります。

mouseenter

$(“要素”).mouseenter(function(){
//処理を書く
});

ボックスの上にカーソルを置いて下さい

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").mouseenter(function(){
		$(this).css("background","yellow");
	});
</script>

ボックスの上にカーソルを当てるととグレーのボックスが黄色になります。

mouseleave

$(“要素”).mouseleave(function(){
//処理を書く
});

ボックスの上にカーソルを当てた後ボックス外にカーソルを移動させて下さい

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").mouseover(function(){
		$(this).css("background","yellow");
	});
	$("#box").mouseleave(function(){
		$(this).css("background","red");
	});
</script>

ボックスの上にカーソルを当てるととグレーのボックスが黄色になり、ボックスの外にカーソルを移動させると赤色になります。

これらをまとめた処理としてmousehoverがあります。

mousehover

$(“要素”).mousehover(function(){
//処理を書く
});

ボックスの上にカーソルを当てた後ボックス外にカーソルを移動させて下さい

<div id="box" style="width:50%;height:200px;background:#ccc;">box</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#box").mouseover(function(){
		$(this).css("background","yellow");
	});
</script>

ボックスの上にカーソルを当てるととグレーのボックスが黄色になり、ボックスの外にカーソルを移動させるとグレーに戻ります。

今回はこのへんで！
せば！