jQueryを扱う上で、よく使用するイベントを簡単にまとめておきます。
イベントって何？
イベントとは、サイトを閲覧しているユーザーが、マウスボタンをクリックしたりスクロールをしたり、Webページ自体を開いたりする何らかのアクションを起こした状態に対し、ブラウザが発生させるものになります。スマートフォン独自のスライドやスワイプ操作なども、イベントのひとつに当たります。
そのイベントによりjQueryの処理を実行するタイミングというものを指定します。
まずはjQueryの基本的な構文を見てみましょう。
$(” “)の部分に対象となる「セレクタ（＝要素）」を入れて、その後ろに「.イベント」として処理をするきっかけとなるアクションを設定します。それから「(function(){ });」の{}の中に処理内容を記述します。
イベント一覧
要素がクリックされたとき
|
1 2 3 |
$("要素").click(function(event){ //処理内容 }); |
要素にカーソルが乗ったとき
|
1 2 3 |
$("要素").mouseover(function(event){ //処理内容 }); |
要素からカーソルが離れたとき
|
1 2 3 |
$("要素").mouseout(function(event){ //処理内容 }); |
要素にカーソルが乗ったときと離れたときをまとめて記述する場合
|
1 2 3 4 5 |
$("要素").hover(function(event){ //カーソルが乗ったとき処理内容 },function(){ //カーソルが離れたときの処理内容 }); |
要素がフォーカスされたとき
|
1 2 3 |
$("要素").focus(function(event){ //処理内容 }); |
要素からフォーカスが外れたとき
|
1 2 3 |
$("要素").blur(function(event){ //処理内容 }); |
要素上で右クリックされたとき
|
1 2 3 |
$("要素").contextmenu(function(event){ //処理内容 }); |
要素がコピーされたとき
|
1 2 3 |
$("要素").on("copy",function(event){ //処理内容 }); |
要素がカットされたとき
|
1 2 3 |
$("要素").on("cut",function(event){ //処理内容 }); |
要素がペーストされたとき
|
1 2 3 |
$("要素").on("paste",function(event){ //処理内容 }); |
要素の値が変わったとき
|
1 2 3 |
$("要素").change(function(event){ //処理内容 }); |
フォームの内容を送信したとき
|
1 2 3 |
$("要素").submit(function(event){ //処理内容 }); |
いずれかのキーが押されたとき
|
1 2 3 |
$(window).keydown(function(event){ //処理内容 }); |
いずれかのキーが押された状態のとき
|
1 2 3 |
$(window).keydown(function(event){ //処理内容 }); |
いずれかのキーが押され離したとき
|
1 2 3 |
$(window).keyup(function(event){ //処理内容 }); |
デバイスウィンドウをリサイズしたとき
|
1 2 3 |
$(window).resize(function(event){ //処理内容 }); |
ページの読み込みが完了したとき
|
1 2 3 |
$(window).load("copy",function(event){ //処理内容 }); |
スクロールされたとき
|
1 2 3 |
$(window).scroll(function(event){ //処理内容 }); |
ページがアンロードされるとき
|
1 2 3 |
$(window).unload(function(event){ //処理内容 }); |
DOMの構築が完了したとき
|
1 2 3 |
$(document).ready(function(event){ //処理内容 }); |
テキストを選択したとき
|
1 2 3 |
$(document).select(function(event){ //処理内容 }); |
頻繁に使用されるイベントが、このように存在しています。丸暗記する必要はないと思いますが、基本的なイベント内容は把握しておく方が良いでしょう。