[jQuery]⑤イベント
- イベントの基本
- ready();
- click();
- マウスのボタン操作を感知
- mousedown();
- mouseup();
- moueover();
- mouseout();
- マウスの動きを感知
- mousemove();
- イベントに関連する処理
- one();
- on();
- off();
イベントの基本
$( セレクター ).イベント(function(){ HTMLが読み込まれたとき実行する処理; });
ready()
- HTMLが読み込まれたタイミングで実行する。
- 毎回記述する、「ページを読み込んだあとにjQuelyを実行」のスクリプト。
$(document).ready(function(){ HTMLが読み込まれたとき実行する処理; });
click()
$(document).ready( function(){ $("button").click(function(){ alert("ボタンが押されました"); }); }); </script> </head> <body> <button>ボタン</button> </body>
ボタンをクリックして画像を変更する。
- メソッドチェーンでsrcとaltを変更
$( function(){ $("button").click( function(){ $("img").attr("src","img/02.png").attr("alt","img02"); }); }); </script> </head> <body> <button onclick="btn()">ボタン</button> <p><img src="img/01.png" alt="img01"></p> </body>
a要素にclickイベントを設定する▶return false;
- そのままだとリンク先に移動してしまうため、返り値にreturn falseを記述する
$(function(){ $("a").click( function(){ $("img").attr("src","img/02.png").attr("alt","img02"); return false; }); }); </script> </head> <body> <a href="img/02.png"> <img src="img/01.png" alt="img01"> </a> </body>
例題:サムネイルをクリックするギャラリー
- リンクのhref属性をattrで取得して画像を変更
$(function(){ $("a").click(function(){ $("img#mainImage").attr("src",$(this).attr('href')); return false; }); }); </script> </head> <body> <div id="container"> <h1>ギャラリー</h1> <ul> <li><a href="img/01.jpg"><img src="img/01s.jpg" alt=""></a></li> <li><a href="img/02.jpg"><img src="img/02s.jpg" alt=""></a></li> <li><a href="img/03.jpg"><img src="img/03s.jpg" alt=""></a></li> <li><a href="img/04.jpg"><img src="img/04s.jpg" alt=""></a></li> <li><a href="img/05.jpg"><img src="img/05s.jpg" alt=""></a></li> </ul> <p> <img id="mainImage" src="img/01.jpg" alt=""> </p> </div> </body>
マウスのボタン操作を感知するイベント
mousedown()
mouseup()
- 指定した要素上にマウスカーソルがある状態で、マウスボタンが離されたら実行。
マウスアクションを感知するイベント
moueover()
- 特定の要素上にマウスが重なった時処理を実行。
mouseout()
- 特定の要素上からマウスカーソルが外れた時処理を実行。
マウスの動きを感知するイベント
mousemove()
- 特定の要素上でマウスカーソルが動いた時に処理
- 座標などの情報を取得する命令とともに、実行するケースが多い
- function(e)にするとe.clientXでX座標を取得 e.clientYでY座標を取得
- 座標はブラウザの左上からマウスカーソルまでの距離をピクセルで記す
例題:画像上のマウスカーソルの座標を書き出す
$(function(){ $("img").mousemove(function(e){ $("p#location").text("X座標:"+e.clientX+" Y座標:"+e.clientY); }); }); </script> </head> <body> <div id="container"> <h1>座標を書き出し</h1> <img src="img/01.jpg" alt=""> <p id="location">画像にカーソルを乗せると座標を表示します</p> </div> </body>
例題2:相対的な座標を取得
offsetX
$("p#location").text("X座標:"+e.offsetX+" Y座標:"+e.offsetY);
FireFoxの場合
- 要素の座標から、offsetX,Yを引く
- 参考▶FirefoxでOfffsetX、OffsetYを実現する。 - コンピュータクワガタ
<script> $(function(){ $("img").mousemove(function(e){ var off = $(this).offset(); $("p#location").text("X座標:"+(e.clientX-off.left)+" Y座標:"+(e.clientY-off.top)); }); }); </script> </head> <body> <div id="container"> <h1>座標を書き出し</h1> <img src="img/01.jpg" alt=""> <p id="location">画像にカーソルを乗せると相対座標を表示します</p> </div> </body> </html>
イベントに関連する処理
one()
- 指定したイベント、発生時に一度だけ処理を実行
クリックしたとき一度だけ実行する
$(function(){ $("img").one("click",function(){ alert("クリックされました"); }); }); </script> </head> <body> <div id="container"> <img src="img/01.jpg" alt=""> </div> </body>
on()
- 対象要素を絞ってイベントを登録する
- $(セレクタ)on(“イベント発生条件”,function(){実行処理…
- 「追加される要素」にイベント処理を設定できる
$(function(){ $("ul").on("click","a",function(){ $("img").attr("src", $(this).attr("href")).attr("alt",$(this).text()); return false; }); $("button").click(function(){ $("ul").append("<li><a href='img/04.jpg'>img04</a></li>"); }); }); </script> </head> <body> <button>li要素を追加</button> <ul> <li><a href="img/01.jpg">img01</a></li> <li><a href="img/02.jpg">img02</a></li> <li><a href="img/03.jpg">img03</a></li> </ul> <p><img src="img/01.jpg" alt=""></p> </body>
off()
- 設定されているイベント処理を取り消す
- $(セレクター).off(“イベント発生条件”);
- button要素にoff()を設定
- off()でa要素のイベント(mouseover)を取り消す
$(function(){ $("a").mouseover(function(){ $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); return false; }) $("button").click(function(){ $("a").off("mouseover"); }); }); </script> </head> <body> <button>取り消し</button> <ul> <li><a href="img/01.jpg">img01</a></li> <li><a href="img/02.jpg">img02</a></li> <li><a href="img/03.jpg">img03</a></li> </ul> <p><img src="img/01.jpg" alt="img01"></p> </body>