2024.01.08
2024.08.04
- Webデザイン

jQueryのイベントを一覧で紹介！シーン別の使い方も解説します！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

jQueryのイベントってたくさんあってよくわからない…

そんな悩みをお持ちの方も多いのではないでしょうか？？

この記事では、jQueryで使われるイベントを一覧で紹介し、使い方も簡単に解説します。

記事を読み終えると、イベントの豊富さや、使い分け方の理解が深まると思います。

jQueryのイベントとは

jQueryを構成する要素は大きく分けて3つあります。

セレクタ・・・「どの」要素？
イベント・・・「いつ」実行する？
メソッド・・・「どんな」内容？

イベントとはどのタイミングでプログラムを動かすか指定するものです。

「クリックした時」「スクロールした時」など、実行したいと思うタイミングに合ったイベントを指定して使います。

jQueryイベント一覧表

画像保存するなどしてお使いください！

ページ読み込み時のイベント

ready

$(document).ready(function(){
});

readyを理解するにはブラウザがページを表示する流れを知っておく必要があります。

HTMLを上から下まで読み込み

↓
DOM生成

↓

画像の読み込み

ザックリこういった流れとなっていますが、readyはDOM生成の後に処理を実行させるイベントになります。

showやfadeOutメソッドなど、jQueryの処理を実行するためにはDOM操作が基本となるため、ブラウザがDOMを読み込んだ後でないと上手く機能しないことが殆どです。

従ってjQueryの構文の殆どにreadyイベントが使われています。ちなみにセレクタの$(document)とはページ全体を指しています。

ここで「readyとか使ったことないけど…」と思う初学者の方もいるかもしれませんが、実はこのreadyイベントは基本的に短縮系で使われていて、それが下の記述になります。

$(function() {
});

はい。いつものjQueryの書き出し文ですね。これがreadyイベントの短縮だと分かれば、いつも冒頭に記述している理由も理解もできるんじゃないかと思います。

load

$(window).on('load', function(){
 //メソッドなどの処理内容
});

readyと比較で紹介されることの多いイベントですが、こちらは画像含めた全ての要素が読み込まれた後に実行させるイベントです。

なので読み込みは下の順番になります。

HTMLの読み込み終了
readyイベント実行
画像の読み込み終了
loadイベント実行

セレクタに指定するのは何でもいいですが、ブラウザで読み込んだページ全体を指すWindowを指定して記述することが多いです。

あとjQuery3.0以上から.load(function()〜の書き方は廃止されているので、例にあげているようにonメソッドを使って書きましょう。

ちなみにjQuery2.0以前はreadyの中に書いても良かったですが、3.0以上では下のようにreadyイベントの外に記述しないと動作しないということも注意しておきましょう。

 //readyとloadイベントは分ける
$(function() {
});

$(window).on('load', function(){
});

unload

$(window).on('unload', function(){
 //メソッドなどの処理内容
});

別ページに遷移する際に実行させるイベントです。load同様、onメソッドで記述します。

error

$(window).on('error', function(){
 //メソッドなどの処理内容
});

何らかの理由でページの読み込みができなかった場合に実行させるイベントです。こちらもload同様、onメソッドで記述します。

スクロール時に使うイベント

scroll

$(セレクタ).scroll(function() {
 //スクロールに連動させたい処理内容
});

画面をスクロールした際に実行させるイベントです。

スクロールしたら要素がふわっと表示されるデザインや、一定の位置までスクロールしたらヘッダーを固定させるなど、スクロール連動型のUIデザインを実装する際に使用されます。

画面幅変更時に使えるイベント

resize

$(window).resize(function() {
 //画面幅を変えた際に実行したい内容
});

ブラウザ幅を変更させた際に実行させるイベントです。対象が画面幅であればセレクタはwindowを指定するのが一般的です。

widthメソッドなどで画面幅を取得し、jQueryでレスポンシブデザインを構築する場合などに使用されます。

マウスクリックに関するイベント

click

$(セレクタ).click(function() {
 //クリックで実行させたい処理内容
});

マウスをクリックした際に実行させるイベントです。mousedownイベントとmouseupイベントの組み合わせでできています。

活用シーンはかなり多く、jQueryの中でも最も汎用的に使用されるイベントかと思います。

クリックイベントに関する詳細はこちらの記事でまとめていますので、気になる方はあわせてご覧ください！

>> jQueryのclickイベントとは？on()との違いも解説！

dblclick

$(セレクタ).dblclick(function() {
 //ダブルクリックで実行させたい処理内容
});

マウスをダブルクリックした際に実行させるイベントです。

mousedown

$(セレクタ).mousedown(function() {
 //マウスボタンを押下した際に実行させたい処理内容
});

マウスボタンを押下した際に実行させるイベントです。クリックではなく、あくまでマウスのボタンが押されているタイミングで実行します。

mouseup

$(セレクタ).mouseup(function() {
 //マウスボタンを離した際に実行させたい処理内容
});

マウスボタンが押下されている状態から、離れた（押下されていない状態に戻った）際に実行させるイベントです。

mousedownとあわせて使用されることが多く、マウスカーソルの動きにあわせた処理の起点に使われたりします。

あと細かいところですが、ボタン押下時は下の順番でイベントが発動します。

1.mousedown
↓
2.mouseup
↓
3.click

contextmenu

$(セレクタ).contextmenu(function() {
 //右クリック時に実行させたい処理内容
});

マウスを右クリックした際に実行させるイベントです。

オリジナルの右クリックメニューを表示させたい場合や、画像などのデータをブラウザ上から保存させたく無い場合などに右クリックを禁止させる処理をこのイベントで指定することができます（あまり使うことは少ないですが）

マウスカーソルの動きに関するイベント

hover

$(セレクタ).hover(
    function() {
     //カーソルが乗った時に実行させたい処理内容
    },
    function() {
     //カーソルが離れた時に実行させたい処理内容
    }
);

マウスカーソルが指定要素に重なった時(hoverした時)に実行させるイベントです。

hoverはカーソルが乗った時と離れた時の2つをカンマ(,)で区切り、function() {〜}として処理内容をそれぞれ指定する必要があります。それぞれ記述しないとマウスカーソルが離れても、指定した処理内容が解除されないなど、意図しない挙動になることが多いです。

clickイベントのようにこちらも省略型のイベントで、mouseenterとmouseleaveが組み合わさっている形です。

mouseenter

$(セレクタ).mouseenter(function() {
 //カーソルが離れた時に実行させたい処理内容
});

指定要素にマウスが乗った際に実行させるイベントです。

mouseleave

$(セレクタ).mouseleave(function() {
 //カーソルが離れた時に実行させたい処理内容
});

指定要素からマウスが出た際に実行させるイベントです。

mouseover

$(セレクタ).mouseover(function() {
 //カーソルが乗った時に実行させたい処理内容
});

カーソルが要素に乗った時に実行させるイベントです。mouseenterと違い、指定要素の子要素にhoverすると、その子要素に加え指定要素にもhoverイベントが効きます。

mouseout

$(セレクタ).mouseout(function() {
 //カーソルが離れた時に実行させたい処理内容
});

カーソルが要素から離れた時に実行させるイベントです。mouseleaveと違い、指定要素の子要素にhoverすると、その子要素に加え指定要素にもhoverイベントが効きます。

mouseoverとmouseoutを使う場合は、HTMLが親子階層になっていると、処理内容のバブリング（伝播）が発生して、処理が何度も繰り返されることがあるので、基本的にはhoverイベントを使いましょう。

$(セレクタ).mouseover(function() {
  //カーソルが乗った時の処理内容
  }).mouseout(function() {
  //カーソルが離れた時の処理内容
});
//↑このように書くならhoverにしておきましょう

ただ、jQueryで動的に生成された要素に指定するにはonメソッドを使う必要があるので、その場合はon(mouseover)とon(mouseout)で指定することになります。

mousemove

$(セレクタ).mousemove(function() {
 //カーソルが離れた時に実行させたい処理内容
});

指定要素の上でマウスが動いた際に実行させるイベントです。

画面上での座標位置を取得したり、マウスカーソルをアイコンに変えて追従させるような凝ったWebサイトなんかに使うことができます。

キー操作に関するイベント

keydown

$(セレクタ).keydown(function() {
 //キーが押された時に実行させたい処理内容
});

キーボードのキーが押された時に実行させるイベントです。

keyup

$(セレクタ).keyup(function() {
 //キーが離れた時に実行させたい処理内容
});

押されているキーボードのキーが離れた時に実行させるイベントです。

keypress

$(セレクタ).keypress(function() {
 //文字キーが押された時に実行させたい処理内容
});

キーボードのキーが押された時に実行させるイベントです。

こちらはkeydownイベントとは違い、コマンドやシフトなどの装飾キーを押しても反応はしません。

3種類ともフォームのバリデーションで使用されることが多いです。

フォームに関するイベント

focus

$(セレクタ).focus(function() {
 //フォームにフォーカスが当たった際の処理内容
});

input要素などのフォームにフォーカス（クリックして入力できる状態など）された際に実行させるイベントです。

blur

$(セレクタ).blur(function() {
 //フォームからフォーカスが外れた際の処理内容
});

input要素などのフォームからフォーカス（クリックして入力できる状態など）が外れた際に実行させるイベントです。

focusin

$(セレクタ).focusin(function() {
 //フォームにフォーカスが当たった際の処理内容
});

input要素などのフォームにフォーカス（クリックして入力できる状態など）された際に実行させるイベントです。

focusとの違いは影響範囲で、focusinで指定する場合はその子要素にあたる要素にもイベント処理内容が伝播して影響します。

例えばフォームの親要素にイベント設定した場合、focusinであればinput要素に処理内容が当たりますが、focusだと当たりません。

<form id="form">
    <label for="name">名前：</label>
    <input id="name" type="text">
</form>

下のように、セレクタを親要素のformタグに設定した場合、focusinイベントでないと子要素のinputタグに影響は与えられません。

// input要素にフォーカスが当たってもcssメソッドは効かない
  $('#form').focus(function () {
    $('#name').css('background', 'red');
  });

// input要素にフォーカスが当たるとcssメソッドが効く
  $('#form').focusin(function () {
    $('#name').css('background', 'red');
  });

focusout

$(セレクタ).focusout(function() {
 //フォームからフォーカスが外れた際の処理内容
});