Jquery入門記事一覧
Jquery 入門 その1 要素にアクセスするJquery 入門 その2 要素にアクセスするメソッドJquery 入門 その3 メソッドチェーンJquery 入門 その4 プラグイン（$.fn.extend）の作り方Jquery 入門 その5 プラグイン（$.extend）のサンプルJquery 入門 その6 イベント処理Jquery 入門 その7 繰り返し処理Jquery 入門 その8 DOMツリーへのアクセスを意識するJquery 入門 その9 非同期通信で用いるデータJquery 入門 その10 非同期通信とはJquery 入門 その11 非同期通信のサンプル1Jquery 入門 その12 非同期通信のサンプル2Jquery 入門 その13 非同期通信のサンプル3 $.post,$.getJquery 入門 その14 非同期通信実践例(formをpostしphpで処理)サンプルのソースコードのダウンロード(下のURLをブラウザで入力してください。)
http://html5.web.fc2.com/jquery_new/jquery_new.zip
---------------------------------------------------------------------
前回の記事、
前々回の記事では、jqueryのプラグイン（自作関数のようなもの）を勉強しましたが、イベントの方が勉強する順番として先だったかな、と思ってます。
では、そのイベント処理を試してみましょう。
イベントの定義として、ここでは、サイト閲覧者の何らかの操作とします。
イベントには、いろんなものがあります。そのうち、私がよく使うイベントとして、以下のものがあります。
click 要素をクリックした時
dblclick 要素をダブルクリックした時
focus 要素をフォーカスした時
blur 要素からフォーカスが外れた時
change 要素を変更し、その要素からフォーカスが外れた時
mouseover 要素にマウスが乗った時
mouseout 要素からマウスが外れた時
これらのイベントの
サンプルを作成しました。
・JavaScript
$(function() { //DOMツリーがREADYになったら実行する
$("#youso1").click(function(){
alert('クリックしました！');
});
$("#youso2").dblclick(function(){
alert('ダブルクリックしました！');
});
$("#youso3").focus(function(){
alert('フォーカスしました！');
});
$("#youso4").blur(function(){
alert('フォーカスアウトしました！');
});
$("#youso5").change(function(){
alert('値を変更しました！');
});
$("#youso6").mouseover(function(){
alert('マウスオーバーしました！');
});
$("#youso7").mouseout(function(){
alert('マウスアウトしました！');
});
});
・HTML
<h2>clickイベント 要素をクリックした時</h2>
<div id='youso1'>クリックしてください</div>
<hr>
<h2>dblclickイベント 要素をダブルクリックした時</h2>
<div id='youso2'>ダブルクリックしてください</div>
<hr>
<h2>focusイベント 要素をフォーカスした時</h2>
<div><input type='text' name='youso3' id='youso3' size='32' value='フォーカスしてください' /></div>
<hr>
<h2>blurイベント 要素からフォーカスが外れた時</h2>
<div><input type='text' name='youso4' id='youso4' size='32' value='フォーカスを外してください' /></div>
<hr>
<h2>change 要素を変更し、その要素からフォーカスが外れた時</h2>
<div><input type='text' name='youso5' id='youso5' size='48' value='値を変更し、フォーカスを外してください' /></div>
<hr>
<h2>mouseover 要素にマウスが乗った時</h2>
<div><input type='button' name='youso6' id='youso6' value='マウスカーソルを載せてください。' /></div>
<hr>
<h2>mouseoutイベント 要素からマウスが外れた時</h2>
<div><input type='button' name='youso7' id='youso7' value='マウスカーソルを載せて、その後にマウスカーソルを外してください。' /></div>
<hr>
> あ、「RightClick」、「LeftClick」等の事です。
> ちゃんと書かずに申し訳ありません。
> 拡張ボタン（サイドボタンやらホイールクリック）も取れるなら、色々と遊べそうかなぁと・・・
> ちょろっと調べた限りでは、対応してなさそうなのですが、何か手段がないのかなぁ？と。
ざっと調べてサンプルを作ってみました。
記事に挙げますね。
