jQueryには20以上のイベントがあるため、全てを理解したり用途に合わせて使い分けるのが難しいですよね。

この記事では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>
HTML
const btn = $("#js-btn");
btn.click(function () {
  alert('クリックされました!');
});
JavaScript

出力結果

dblclick():ダブルクリックされた際に、登録したイベントを発火

dblclick()イベントは、要素をダブルクリックするとイベントが発火します。

dblclick()イベントのサンプル 

<button id="js-btn">ボタンダブルクリックでアラートが出る</button>
HTML
const btn = $('#js-btn');
const box = $('.box');

btn.dblclick(function () {
  alert('ダブルクリックされました');
});
JavaScript

出力結果

mousedown():マウスが押されたときにイベントが発火

mousedown()イベントは、マウスが押されたときにイベントが発火します。

mousedown()のサンプル

<button id="js-btn-down">mousedown!</button>
HTML
const btnDown = $('#js-btn-down');
btnDown.mousedown(function () {
  console.log('down');
});
JavaScript

出力結果

mouseup():マウスが押された状態から離されたときにイベントが発火

mouseup()イベントは、マウスが押された状態から離されたときにイベントが発火します。

mouseup()のサンプル

<button id="js-btn-up">mouseup!</button>
HTML
const btnUp = $('#js-btn-up');
btnUp.mouseup(function () {
  console.log('up');
});
JavaScript

出力結果

contextmenu():右クリックでイベントを発火

contextmenu()イベントは、右クリックでイベントを発火します。

contextmenu()のサンプル

 <button id="js-more">右クリック!</button>
HTML
const 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;
}
CSS
const 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;
}
CSS
const 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;
}
CSS
const 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;
}
CSS
const 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;
}
CSS
box.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;
}
JavaScript
const 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;
}
CSS
const box = $('#js-box');

box.on("touchstart", function () {
  box.css('background', "red");
});
JavaScript

touchend():タッチデバイスで要素をタップして指を離した後、イベントが発火

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;
}
CSS
const box = $('#js-box');
box.on("touchend", function () {
  box.css('background', "blue");
});
JavaScript

touchmove():タッチデバイスで要素をタップしたまま指を移動させると、イベントが発火

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;
}
CSS
const box = $('#js-box');
box.on("touchmove", function () {
  alert('touchmove');

});
JavaScript

jQueryのフォーム系イベント一覧

フォームイベントは、フォーム内の要素の操作に関してイベントが発火します。

フォームイベントは、次のようなものがあります。

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
TOP