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()イベントのサンプル 

htmlのコード

<button id="js-btn">ボタンクリックでアラートが出る</button>

javascriptのコード

const btn = $("#js-btn");
btn.click(function () {
  alert('クリックされました!');
});

出力結果

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

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

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

htmlのコード

<button id="js-btn">ボタンダブルクリックでアラートが出る</button>

javascriptのコード

const btn = $('#js-btn');
const box = $('.box');

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

出力結果

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

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

mousedown()のサンプル

htmlのコード

<button id="js-btn-down">mousedown!</button>

javascriptのコード

const btnDown = $('#js-btn-down');
btnDown.mousedown(function () {
  console.log('down');
});

出力結果

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

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

mouseup()のサンプル

htmlのコード

<button id="js-btn-up">mouseup!</button>

javascriptのコード

const btnUp = $('#js-btn-up');
btnUp.mouseup(function () {
  console.log('up');
});

出力結果

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

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

contextmenu()のサンプル

htmlのコード

 <button id="js-more">右クリック!</button>

javascriptのコード

const more = $('#js-more');

more.contextmenu(function () {
  alert('ok');
});

出力結果

jQueryのマウスカーソル系イベント一覧

マウスカーソルイベントは、マウスのホバー(マウスオーバーとマウスアウト)だけでイベントが発火します。

マウスカーソルイベントについては、次のようなものがあります。

jQueryのマウスカーソルイベント

  • mousemove():マウスが要素の上で移動したときイベントが発火
  • mouseover():マウスが要素の上にあるときイベントが発火
  • mouseout():マウスが要素から離れたときイベントが発火
  • mouseenter()mouseover()と同じで、マウスが要素の上にあるとき発火
  • mouseleave()mouseout()と同じで、マウスが要素から離れたとき発火
  • hover()mouseenter()mouseleave()の組み合わせ

mousemove():マウスが要素の上で移動したときイベントが発火

 mousemove()イベントは、マウスが要素の上で移動したときイベントが発火します。

mousemove()のサンプル

htmlのコード

<div class="box" id="js-box">mousemove</div>

cssのコード

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

.add {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 10px;
}

javascriptのコード

const box = $('#js-box');
box.mousemove(function () {
  box.append('<div class="add">add!<div>')
});

出力結果

mouseover():マウスが要素の上にあるときイベントが発火

 mouseover()イベントは、マウスが要素の上にあるときイベントが発火します。

mouseover()のサンプル

htmlのコード

<div class="box" id="js-box">mouseover</div>

cssのコード

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

.change-blue {
  background: blue;
}

javascriptのコード

const box = $('#js-box');

box.mouseover(function () {
  box.addClass('change-blue');
});

出力結果

mouseout():マウスが要素から離れたときイベントが発火

 mouseout()イベントは、マウスが要素から離れたときイベントが発火します。

mouseout()のサンプル

htmlのコード

<div class="box" id="js-box">mouseout</div>

<div class="hover" id="js-hover">hover</div>

cssのコード

.box,.hover {
  width: 200px;
  height: 200px;
  background: orange;
}

.change-green {
  background: green;
}

javascriptのコード

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');
  }
);

出力結果

mouseenter():mouseover()と同じで、マウスが要素の上にあるとき発火

mouseenter()イベントは、mouseover()イベントと同じで、マウスが要素の上にあるとき発火します。

mouseenter()のサンプル

htmlのコード

 <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>

cssのコード

.box {
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: orange;
}

javascriptのコード

const box = $('#js-box');

box.mouseenter(function () {
  alert('ok');
});

出力結果

mouseleave():mouseout()と同じで、マウスが要素から離れたとき発火

mouseleave()イベントは、mouseout()イベントと同じで、マウスが要素から離れたとき発火します。

mouseleave()のサンプル

htmlのコード

<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>

cssのコード

.box {
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: orange;
}

javascriptのコード

box.mouseleave(function () {
  alert('mouseleave');
});

出力結果

hover():mouseenter()とmouseleave()の組み合わせ

hover()イベントは、要素にマウスをホバー(マウスオーバーとマウスアウト)するとイベントが発火します。

hover()のサンプル

htmlのコード

<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>

cssのコード

.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');
    }
  )
});

出力結果

jQueryのスマホタッチ系イベント一覧

スマホタッチイベントは、タッチデバイスで要素を指でタップするだけでイベントが発火します。

スマホタッチイベントについては、次のようなものがあります。

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

touchstart():タッチデバイスで要素をタップしたときにイベントが発火

touchstart()イベントは、タッチデバイスで要素をタップしたときにイベントが発火します。

touchstart()のサンプル

htmlのコード

<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>

cssのコード

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

javascriptのコード

const box = $('#js-box');

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

出力結果

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

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

touchend()のサンプル

htmlのコード

<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>

cssのコード

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

javascriptのコード

const box = $('#js-box');
box.on("touchend", function () {
  box.css('background', "blue");
});

出力結果

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

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

touchmove()のサンプル

htmlのコード

<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>

cssのコード

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

javascriptのコード

const box = $('#js-box');
box.on("touchmove", function () {
  alert('touchmove');

});

出力結果

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

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

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

jQueryのフォームイベント

  • focus():要素にフォーカスを当てるとイベント発火
  • blur():要素にフォーカスを当て、そのフォーカスを外すとイベント発火
  • focusin():要素にフォーカスを当てるとイベント発火
  • focusout():要素にフォーカスを当て、そのフォーカスを外すとイベント発火
  • change():フォーム要素が変更されたときにイベント発火
  • submit():ユーザーがsubmit要素をクリックしたときにイベント発火
  • keydown():キーボードのキーが押し込まれたとき、イベント発火
  • keypress():キーボードのキーが押されたとき、イベント発火
  • keyup():押し込まれたキーボードが上がったとき、イベント発火

focus():要素にフォーカスを当てるとイベント発火

focus()イベントは、要素にフォーカスを当てるとイベント発火します。

focus()のサンプル

htmlのコード

<input type="text" placeholder="focus">

javascriptのコード

$("input").focus(function () {
  console.log("focus!");
});

出力結果

blur():要素にフォーカスを当て、そのフォーカスを外すとイベント発火

blur()イベントは、要素にフォーカスを当て、そのフォーカスを外すとイベント発火します。

blur()のサンプル

htmlのコード

<input type="text" placeholder="blur">

javascriptのコード

$("input").blur(function () {
  console.log("blur!");
});

出力結果

focusin():要素にフォーカスを当てるとイベント発火

focusin()イベントは、要素にフォーカスを当てるとイベント発火します。

focusin()のサンプル

htmlのコード

<input type="text" placeholder="focusin">

javascriptのコード

$("input").focusin(function () {
  console.log("focusin!");
});

出力結果

focusout():要素にフォーカスを当て、そのフォーカスを外すとイベント発火

focusout()イベントは、要素にフォーカスを当て、そのフォーカスを外すとイベント発火します。

focusout()のサンプル

htmlのコード

<input type="text" placeholder="focusout">

javascriptのコード

$("input").focusout(function () {
  console.log("focusout!");
});

出力結果

change():フォーム要素が変更されたときにイベント発火

change()イベントは、フォーム要素が変更されたときにイベント発火します。

change()のサンプル

htmlのコード

<input type="text" placeholder="文章を入力する">

javascriptのコード

$('input').change(function () {
  $('input').css('background', 'red');
});

出力結果

submit():ユーザーがsubmit要素をクリックしたときにイベント発火

submit()イベントは、ユーザーがsubmit要素をクリックしたときにイベント発火します。

submit()のサンプル

htmlのコード

<form action="">
  <button type="submit">送信</button>
</form>

javascriptのコード

$('form').submit(function () {
  alert('submit!');
});

出力結果

keydown():キーボードのキーが押し込まれたとき、イベント発火

keydown()イベントは、キーボードのキーが押し込まれたとき、イベント発火します。

keydown()のサンプル

htmlのコード

<input type="text" placeholder="テキストを入力する">
<p>keydown:<span class="keydown"></span></p>

javascriptのコード

$("input").keydown(function (e) {
  const key = e.keyCode;
  $(".keydown").text(key);
});

出力結果

keypress():キーボードのキーが押されたとき、イベント発火

 keypress()イベントは、キーボードのキーが押されたとき、イベント発火します。

keypress()のサンプル

htmlのコード

<input type="text" placeholder="テキストを入力する">
<p>keypress:<span class="keypress"></span></p>

javascriptのコード

$("input").keypress(function (e) {
  const key = e.keyCode;
  $(".keypress").text(key);

});

出力結果

keyup():押し込まれたキーボードが上がったとき、イベント発火

keyup()イベントは、押し込まれたキーボードが上がったとき、イベント発火します。

keyup()のサンプル

htmlのコード

<input type="text" placeholder="テキストを入力する">

<p>keyup:<span class="keyup"></span></p>

javascriptのコード

$("input").keyup(function (e) {
  const key = e.keyCode;
  $(".keyup").text(key);

});

出力結果

jQueryの画面変化系イベント一覧

画面変化イベントは、スクロールや画面サイズ変更でイベントが発火します。

画面変化イベントは次のようなものがあります。

jQueryの画面変化イベント

  • scroll():スクロール中にイベント発火
  • resize():画面サイズを変更するとイベント発火

scroll():スクロール中にイベント発火

scroll()イベントは、スクロール中にイベント発火します。

scroll()のサンプル

htmlのコード

<div class="scroll-area">
  <div class="box"></div>
</div>

cssのコード

.scroll-area {
  overflow: scroll;
  height: 200px;
  border: 1px solid black;
  width: 50%;
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  margin: 20px;
}

javascriptのコード

$('.scroll-area').scroll(function () {
  console.log("scroll!");

});

出力結果

resize():画面サイズを変更するとイベント発火

resize()イベントは、画面サイズを変更するとイベント発火します。

resize()のサンプル

$(window).resize(function () {
  console.log("resize!");

});

出力結果

jQueryの読み込み系イベント一覧

読み込みイベントは、データが読み込まれたタイミングでイベントが発火します。

読み込みイベントは次のようなものがあります

jQueryの読み込みイベント

  • ready():DOMがロードされて操作・解析が可能になったタイミングでイベントが発火
  • load():DOMがロードされ画像などのデータの読み込み完了後にイベント発火
  • unload():ページが閉じられたり、ページから移動した場合などにイベントが発火
  • error():エラーが発生したときにイベント発火

ready():DOMがロードされて操作・解析が可能になったタイミングでイベントが発火

ready()イベントは、DOMがロードされて操作・解析が可能になったタイミングでイベントが発火します。

ready()のサンプル

javascriptのコード

$(document).ready(function () {
  console.log("ready!");

});

出力結果

load():DOMがロードされ画像などのデータの読み込み完了後にイベント発火

load()イベントは、DOMがロードされ画像などのデータの読み込み完了後にイベントが発火します。

load()のサンプル

javascriptのコード

$(window).on("load", function () {
  console.log("load!");

});

出力結果

unload():ページが閉じられたり、ページから移動した場合などにイベントが発火

unload()イベントは、ページが閉じられたり、ページから移動した場合などにイベントが発火します。

unload()のサンプル

javascriptのコード

$(window).on("unload", function () {
  console.log("unload!");

});

出力結果

error():エラーが発生したときにイベント発火

error()イベントは、エラーが発生したときにイベント発火します。

error()のサンプル

htmlのコード

<div class="imgbox">
    <img src="" alt="">
</div>
<button>click!</button>

javascriptのコード

$("button").click(function () {
  $("img").on("error", function () {
    console.log("画像が読み込まれませんでした");

  }).attr("src", "dummy.png");
});

出力結果

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP