jQueryには20以上のイベントがあるため、全てを理解したり用途に合わせて使い分けるのが難しいですよね。
この記事ではjQueryのイベントを一覧で紹介し、サンプルコードを用いて使い方を紹介します。
最後まで記事を読むと、jQueryのイベント一覧を理解し、用途に合わせて適切なイベントを使用できるようになります。
目次
- jQueryのイベント一覧
- jQueryのクリック系イベント一覧
- jQueryのマウスカーソル系イベント一覧
- jQueryのスマホタッチ系イベント一覧
- jQueryのフォーム系イベント一覧
- jQueryの画面変化系イベント一覧
- jQueryの読み込み系イベント一覧
jQueryのイベント一覧
jQueryのイベントは、次のようなものがあります。
イベントの種類 | イベント | 用途 |
クリック系イベント | click() | クリック操作で発火するイベント |
dblclick() | ダブルクリックされた際に、登録したイベントを発火 | |
mousedown() | マウスが押されたときにイベントが発火 | |
mouseup() | マウスが押された状態から離されたときにイベントが発火 | |
contextmenu() | 右クリックでイベントを発火 | |
マウスカーソル系イベント | mousemove() | マウスが要素の上で移動したときイベントが発火 |
mouseover() | マウスが要素の上にあるときイベントが発火 | |
mouseout() | マウスが要素から離れたときイベントが発火 | |
mouseenter() | mouseover()と同じで、マウスが要素の上にあるとき発火 | |
mouseleave() | mouseout()と同じで、マウスが要素から離れたとき発火 | |
hover() | mouseenter()とmouseleave()の組み合わせ | |
スマホタッチ系イベント | touchstart() | タッチデバイスで要素をタップしたときにイベントが発火 |
touchend() | タッチデバイスで要素をタップして指を離した後、イベントが発火 | |
touchmove() | タッチデバイスで要素をタップしたまま指を移動させると、イベントが発火 | |
フォーム系イベント | focus() | タッチデバイスで要素をタップして指を離した後、イベントが発火 |
blur() | タッチデバイスで要素をタップしたまま指を移動させると、イベントが発火 | |
focusin() | 要素にフォーカスを当てるとイベント発火 | |
focusout() | 要素にフォーカスを当て、そのフォーカスを外すとイベント発火 | |
change() | フォーム要素が変更されたときにイベント発火 | |
submit() | ユーザーがsubmit要素をクリックしたときにイベント発火 | |
keydown() | キーボードのキーが押し込まれたとき、イベント発火 | |
keypress() | キーボードのキーが押されたとき、イベント発火 | |
keyup() | 押し込まれたキーボードが上がったとき、イベント発火 | |
画面変化系イベント | scroll() | スクロール中にイベント発火 |
resize() | 画面サイズを変更するとイベント発火 | |
読み込み系イベント | ready() | DOMがロードされて操作・解析が可能になったタイミングでイベントが発火 |
load() | DOMがロードされ画像などのデータの読み込み完了後にイベント発火 | |
unload() | ページが閉じられたり、ページから移動した場合などにイベントが発火 | |
error() | エラーが発生したときにイベント発火 |
jQueryのクリック系イベント一覧
クリックイベントは要素をクリックするとイベントが発火するのが特徴です。
クリックイベントについては、次のようなものがあります。
jQueryクリックイベント
click()
:クリック操作で発火するイベントdblclick()
:ダブルクリックされた際に、登録したイベントを発火mousedown()
:マウスが押されたときにイベントが発火mouseup()
:マウスが押された状態から離されたときにイベントが発火contextmenu()
:右クリックでイベントを発火
click():クリック操作で発火するイベント
click()イベントは要素をクリックするとイベントが発火します。
click()イベントのサンプル
<button id="js-btn">ボタンクリックでアラートが出る</button>
HTMLconst btn = $("#js-btn");
btn.click(function () {
alert('クリックされました!');
});
JavaScript出力結果
dblclick():ダブルクリックされた際に、登録したイベントを発火
dblclick()イベントは、要素をダブルクリックするとイベントが発火します。
dblclick()イベントのサンプル
<button id="js-btn">ボタンダブルクリックでアラートが出る</button>
HTMLconst btn = $('#js-btn');
const box = $('.box');
btn.dblclick(function () {
alert('ダブルクリックされました');
});
JavaScript出力結果
mousedown():マウスが押されたときにイベントが発火
mousedown()イベントは、マウスが押されたときにイベントが発火します。
mousedown()のサンプル
<button id="js-btn-down">mousedown!</button>
HTMLconst btnDown = $('#js-btn-down');
btnDown.mousedown(function () {
console.log('down');
});
JavaScript出力結果
mouseup():マウスが押された状態から離されたときにイベントが発火
mouseup()イベントは、マウスが押された状態から離されたときにイベントが発火します。
mouseup()のサンプル
<button id="js-btn-up">mouseup!</button>
HTMLconst btnUp = $('#js-btn-up');
btnUp.mouseup(function () {
console.log('up');
});
JavaScript出力結果
contextmenu():右クリックでイベントを発火
contextmenu()イベントは、右クリックでイベントを発火します。
contextmenu()のサンプル
<button id="js-more">右クリック!</button>
HTMLconst more = $('#js-more');
more.contextmenu(function () {
alert('ok');
});
JavaScript出力結果
jQueryのマウスカーソル系イベント一覧
マウスカーソルイベントは、マウスのホバー(マウスオーバーとマウスアウト)だけでイベントが発火します。
マウスカーソルイベントについては、次のようなものがあります。
jQueryのマウスカーソルイベント
mousemove()
:マウスが要素の上で移動したときイベントが発火mouseover()
:マウスが要素の上にあるときイベントが発火mouseout()
:マウスが要素から離れたときイベントが発火mouseenter()
:mouseover()
と同じで、マウスが要素の上にあるとき発火mouseleave()
:mouseout()
と同じで、マウスが要素から離れたとき発火hover()
:mouseenter()
とmouseleave()
の組み合わせ
mousemove():マウスが要素の上で移動したときイベントが発火
mousemove()イベントは、マウスが要素の上で移動したときイベントが発火します。
mousemove()のサンプル
<div class="box" id="js-box">mousemove</div>
HTML.box {
width: 200px;
height: 200px;
background: orange;
}
.add {
width: 100px;
height: 100px;
background: red;
margin-bottom: 10px;
}
CSSconst box = $('#js-box');
box.mousemove(function () {
box.append('<div class="add">add!<div>')
});
JavaScript出力結果
mouseover():マウスが要素の上にあるときイベントが発火
mouseover()イベントは、マウスが要素の上にあるときイベントが発火します。
mouseover()のサンプル
<div class="box" id="js-box">mouseover</div>
HTML.box {
width: 200px;
height: 200px;
background: orange;
}
.change-blue {
background: blue;
}
CSSconst box = $('#js-box');
box.mouseover(function () {
box.addClass('change-blue');
});
JavaScript出力結果
mouseout():マウスが要素から離れたときイベントが発火
mouseout()イベントは、マウスが要素から離れたときイベントが発火します。
mouseout()のサンプル
<div class="box" id="js-box">mouseout</div>
<div class="hover" id="js-hover">hover</div>
HTML.box,.hover {
width: 200px;
height: 200px;
background: orange;
}
.change-green {
background: green;
}
CSSconst box = $('#js-box');
const hov = $('#js-hover');
box.mouseover(function () {
box.addClass('change-green');
});
box.mouseout(function () {
box.removeClass('change-green');
});
// hoverイベント
hov.hover(
function() {
hov.css('background', '#ff0');
},
function() {
hov.css('background', '#09c');
}
);
JavaScript出力結果
mouseenter():mouseover()と同じで、マウスが要素の上にあるとき発火
mouseenter()イベントは、mouseover()イベントと同じで、マウスが要素の上にあるとき発火します。
mouseenter()のサンプル
<div class="box" id="js-box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
HTML.box {
width: 200px;
height: 200px;
cursor: pointer;
background: orange;
}
CSSconst box = $('#js-box');
box.mouseenter(function () {
alert('ok');
});
JavaScript出力結果
mouseleave():mouseout()と同じで、マウスが要素から離れたとき発火
mouseleave()イベントは、mouseout()イベントと同じで、マウスが要素から離れたとき発火します。
mouseleave()のサンプル
<div class="box" id="js-box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
JavaScript.box {
width: 200px;
height: 200px;
cursor: pointer;
background: orange;
}
CSSbox.mouseleave(function () {
alert('mouseleave');
});
JavaScript出力結果
hover():mouseenter()とmouseleave()の組み合わせ
hover()イベントは、要素にマウスをホバー(マウスオーバーとマウスアウト)するとイベントが発火します。
hover()のサンプル
<div class="box" id="js-box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
HTML.box {
width: 200px;
height: 200px;
cursor: pointer;
background: orange;
}
JavaScriptconst box = $("#js-box")
$(function () {
box.hover(
function () {
$(this).css('background', 'red');
},
function () {
$(this).css('background', 'orange');
}
)
});
JavaScript出力結果
jQueryのスマホタッチ系イベント一覧
スマホタッチイベントは、タッチデバイスで要素を指でタップするだけでイベントが発火します。
スマホタッチイベントについては、次のようなものがあります。
touchstart()
:タッチデバイスで要素をタップしたときにイベントが発火touchend()
:タッチデバイスで要素をタップして指を離した後、イベントが発火touchmove()
:タッチデバイスで要素をタップしたまま指を移動させると、イベントが発火
touchstart():タッチデバイスで要素をタップしたときにイベントが発火
touchstart()イベントは、タッチデバイスで要素をタップしたときにイベントが発火します。
touchstart()のサンプル
<div class="box" id="js-box">touch!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
HTML.box {
width: 200px;
height: 200px;
background: orange;
}
CSSconst box = $('#js-box');
box.on("touchstart", function () {
box.css('background', "red");
});
JavaScripttouchend():タッチデバイスで要素をタップして指を離した後、イベントが発火
touchend()イベントは、タッチデバイスで要素をタップして指を離した後、イベントが発火します。
touchend()のサンプル
<div class="box" id="js-box">touch!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
HTML.box {
width: 200px;
height: 200px;
background: orange;
}
CSSconst box = $('#js-box');
box.on("touchend", function () {
box.css('background', "blue");
});
JavaScripttouchmove():タッチデバイスで要素をタップしたまま指を移動させると、イベントが発火
touchmove()イベントは、タッチデバイスで要素をタップしたまま指を移動させると、イベントが発火します。
touchmove()のサンプル
<div class="box" id="js-box">タップしたまま指を移動!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
HTML.box {
width: 200px;
height: 200px;
background: orange;
}
CSSconst box = $('#js-box');
box.on("touchmove", function () {
alert('touchmove');
});
JavaScriptjQueryのフォーム系イベント一覧
フォームイベントは、フォーム内の要素の操作に関してイベントが発火します。
フォームイベントは、次のようなものがあります。
jQueryのフォームイベント
focus()
:要素にフォーカスを当てるとイベント発火blur()
:要素にフォーカスを当て、そのフォーカスを外すとイベント発火focusin()
:要素にフォーカスを当てるとイベント発火focusout()
:要素にフォーカスを当て、そのフォーカスを外すとイベント発火change()
:フォーム要素が変更されたときにイベント発火submit()
:ユーザーがsubmit要素をクリックしたときにイベント発火keydown()
:キーボードのキーが押し込まれたとき、イベント発火keypress()
:キーボードのキーが押されたとき、イベント発火keyup()
:押し込まれたキーボードが上がったとき、イベント発火
focus():要素にフォーカスを当てるとイベント発火
focus()イベントは、要素にフォーカスを当てるとイベント発火します。
focus()のサンプル
<input type="text" placeholder="focus">
HTML$("input").focus(function () {
console.log("focus!");
});
JavaScript出力結果
blur():要素にフォーカスを当て、そのフォーカスを外すとイベント発火
blur()イベントは、要素にフォーカスを当て、そのフォーカスを外すとイベント発火します。
blur()のサンプル
<input type="text" placeholder="blur">
HTML$("input").blur(function () {
console.log("blur!");
});
JavaScript出力結果
focusin():要素にフォーカスを当てるとイベント発火
focusin()イベントは、要素にフォーカスを当てるとイベント発火します。
focusin()のサンプル
<input type="text" placeholder="focusin">
HTML$("input").focusin(function () {
console.log("focusin!");
});
JavaScript出力結果
focusout():要素にフォーカスを当て、そのフォーカスを外すとイベント発火
focusout()イベントは、要素にフォーカスを当て、そのフォーカスを外すとイベント発火します。
focusout()のサンプル
<input type="text" placeholder="focusout">
HTML$("input").focusout(function () {
console.log("focusout!");
});
JavaScript出力結果
change():フォーム要素が変更されたときにイベント発火
change()イベントは、フォーム要素が変更されたときにイベント発火します。
change()のサンプル
<input type="text" placeholder="文章を入力する">
HTML$('input').change(function () {
$('input').css('background', 'red');
});
JavaScript出力結果
submit():ユーザーがsubmit要素をクリックしたときにイベント発火
submit()イベントは、ユーザーがsubmit要素をクリックしたときにイベント発火します。
submit()のサンプル
<form action="">
<button type="submit">送信</button>
</form>
JavaScript$('form').submit(function () {
alert('submit!');
});
JavaScript出力結果
keydown():キーボードのキーが押し込まれたとき、イベント発火
keydown()イベントは、キーボードのキーが押し込まれたとき、イベント発火します。
keydown()のサンプル
<input type="text" placeholder="テキストを入力する">
<p>keydown:<span class="keydown"></span></p>
HTML$("input").keydown(function (e) {
const key = e.keyCode;
$(".keydown").text(key);
});
JavaScript出力結果
keypress():キーボードのキーが押されたとき、イベント発火
keypress()イベントは、キーボードのキーが押されたとき、イベント発火します。
keypress()のサンプル
<input type="text" placeholder="テキストを入力する">
<p>keypress:<span class="keypress"></span></p>
HTML$("input").keypress(function (e) {
const key = e.keyCode;
$(".keypress").text(key);
});
JavaScript出力結果
keyup():押し込まれたキーボードが上がったとき、イベント発火
keyup()イベントは、押し込まれたキーボードが上がったとき、イベント発火します。
keyup()のサンプル
<input type="text" placeholder="テキストを入力する">
<p>keyup:<span class="keyup"></span></p>
HTML$("input").keyup(function (e) {
const key = e.keyCode;
$(".keyup").text(key);
});
JavaScript出力結果
jQueryの画面変化系イベント一覧
画面変化イベントは、スクロールや画面サイズ変更でイベントが発火します。
画面変化イベントは次のようなものがあります。
jQueryの画面変化イベント
scroll()
:スクロール中にイベント発火resize()
:画面サイズを変更するとイベント発火
scroll():スクロール中にイベント発火
scroll()イベントは、スクロール中にイベント発火します。
scroll()のサンプル
<div class="scroll-area">
<div class="box"></div>
</div>
HTML.scroll-area {
overflow: scroll;
height: 200px;
border: 1px solid black;
width: 50%;
}
.box {
width: 200px;
height: 200px;
background: orange;
margin: 20px;
}
CSS$('.scroll-area').scroll(function () {
console.log("scroll!");
});
JavaScript出力結果
resize():画面サイズを変更するとイベント発火
resize()イベントは、画面サイズを変更するとイベント発火します。
resize()のサンプル
$(window).resize(function () {
console.log("resize!");
});
JavaScript出力結果
jQueryの読み込み系イベント一覧
読み込みイベントは、データが読み込まれたタイミングでイベントが発火します。
読み込みイベントは次のようなものがあります
jQueryの読み込みイベント
ready()
:DOMがロードされて操作・解析が可能になったタイミングでイベントが発火load()
:DOMがロードされ画像などのデータの読み込み完了後にイベント発火unload()
:ページが閉じられたり、ページから移動した場合などにイベントが発火error()
:エラーが発生したときにイベント発火
ready():DOMがロードされて操作・解析が可能になったタイミングでイベントが発火
ready()イベントは、DOMがロードされて操作・解析が可能になったタイミングでイベントが発火します。
ready()のサンプル
$(document).ready(function () {
console.log("ready!");
});
JavaScript出力結果
load():DOMがロードされ画像などのデータの読み込み完了後にイベント発火
load()イベントは、DOMがロードされ画像などのデータの読み込み完了後にイベントが発火します。
load()のサンプル
$(window).on("load", function () {
console.log("load!");
});
JavaScript出力結果
unload():ページが閉じられたり、ページから移動した場合などにイベントが発火
unload()イベントは、ページが閉じられたり、ページから移動した場合などにイベントが発火します。
unload()のサンプル
$(window).on("unload", function () {
console.log("unload!");
});
JavaScript出力結果
error():エラーが発生したときにイベント発火
error()イベントは、エラーが発生したときにイベント発火します。
error()のサンプル
<div class="imgbox">
<img src="" alt="">
</div>
<button>click!</button>
HTML$("button").click(function () {
$("img").on("error", function () {
console.log("画像が読み込まれませんでした");
}).attr("src", "dummy.png");
});
JavaScript出力結果
チェックテスト
チェックテストを確認する
下記ボタンをクリックした際に「注意!」というアラートが出るコードをdiscordで共有ください。
<button id="js-btn">ボタンクリックでアラートが出る</button>
HTML