【jQuery】イベント一覧まとめ

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

この記事ではjQueryのイベントを一覧で紹介し、サンプルコードを用いて使い方を紹介します。

最後まで記事を読むと、jQueryのイベント一覧を理解し、用途に合わせて適切なイベントを使用できるようになります。

jQueryのイベント一覧

jQueryのイベントは、次のようなものがあります。

jQueryのクリック系イベント一覧

クリックイベントは要素をクリックするとイベントが発火するのが特徴です。

クリックイベントについては、次のようなものがあります。

jQueryクリックイベント

• click()：クリック操作で発火するイベント
• dblclick()：ダブルクリックされた際に、登録したイベントを発火
• mousedown()：マウスが押されたときにイベントが発火
• mouseup()：マウスが押された状態から離されたときにイベントが発火
• contextmenu()：右クリックでイベントを発火

click()：クリック操作で発火するイベント

click()イベントは要素をクリックするとイベントが発火します。

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

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

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

click()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】click()はイベント発火に便利！使い方を解説

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

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

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

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

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

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

See the Pen dblclick-alert by ZeroPlus (@zeroplus-programming) on CodePen.

dblclick()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】dblclick()の使い方とon()との違いを解説

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

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

mousedown()のサンプル

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

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

出力結果

mousedown()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】click()よりも速い！mousedown()とmouseup()とは

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

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

mouseup()のサンプル

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

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

出力結果

mouseup()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】click()よりも速い！mousedown()とmouseup()とは

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

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

contextmenu()のサンプル

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

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

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

出力結果

See the Pen contextmenu by ZeroPlus (@zeroplus-programming) on CodePen.

mouseup()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】右クリックで発火するcontextmenuの使い方

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

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

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

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

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

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

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

mousemove()のサンプル

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

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

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

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

出力結果

See the Pen mousemove by ZeroPlus (@zeroplus-programming) on CodePen.

mousemove()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】マウスを動かすだけで発火するmousemove/mouseover/mouseout

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

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

mouseover()のサンプル

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

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

.change-blue {
  background: blue;
}

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

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

出力結果

See the Pen mouseover by ZeroPlus (@zeroplus-programming) on CodePen.

mouseover()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】マウスを動かすだけで発火するmousemove/mouseover/mouseout

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

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

mouseout()のサンプル

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

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

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

.change-green {
  background: green;
}

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

出力結果

See the Pen mouseout by ZeroPlus (@zeroplus-programming) on CodePen.

mouseout()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】マウスを動かすだけで発火するmousemove/mouseover/mouseout

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>

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

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

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

出力結果

See the Pen mouseenter-alert by ZeroPlus (@zeroplus-programming) on CodePen.

mouseenter()については下記の記事で詳しく解説していますので、ご一読ください。

下記の記事でmouseenter()とmouseover()の違いについても解説しています。

【jQuery】マウスの出入りでイベント発火。mouseenterとmouseleveの使い方

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>

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

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

出力結果

See the Pen mouseleace-alert by ZeroPlus (@zeroplus-programming) on CodePen.

mouseleave()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】マウスの出入りでイベント発火。mouseenterとmouseleveの使い方

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>

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

const box = $("#js-box")
$(function () {
  box.hover(
    function () {
      $(this).css('background', 'red');
    },
    function () {
      $(this).css('background', 'orange');
    }
  )
});

出力結果

See the Pen jQuery-hover by ZeroPlus (@zeroplus-programming) on CodePen.

hover()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】hover()を使ったマウスホバー時の処理を解説

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>

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

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

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

出力結果

See the Pen jQuery-touchstart by ZeroPlus (@zeroplus-programming) on CodePen.

touchstart()イベントについては下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】スマホのみで発火するtouchstartとtouchendの使い方

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>

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

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

出力結果

See the Pen jQuery-touchend by ZeroPlus (@zeroplus-programming) on CodePen.

touchend()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】スマホのみで発火するtouchstartとtouchendの使い方

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>

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

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

});

出力結果

See the Pen jQuery-touchmove-alert by ZeroPlus (@zeroplus-programming) on CodePen.

touchmove()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】指の移動で発火するtouchmoveイベントの使い方

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

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

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

jQueryのフォームイベント

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

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

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

focus()のサンプル

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

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

出力結果

focus()については、下記の記事でも紹介しています。

【jQuery】フォーカスされている要素にイベントを発火させるfocus/blur/focusin/focusoutを解説

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

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

blur()のサンプル

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

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

出力結果

blur()については、下記の記事でも紹介しています。

【jQuery】フォーカスされている要素にイベントを発火させるfocus/blur/focusin/focusoutを解説

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

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

focusin()のサンプル

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

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

出力結果

focusin()については、下記の記事でも紹介しています。

【jQuery】フォーカスされている要素にイベントを発火させるfocus/blur/focusin/focusoutを解説

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

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

focusout()のサンプル

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

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

出力結果

focusout()については、下記の記事でも紹介しています。

【jQuery】フォーカスされている要素にイベントを発火させるfocus/blur/focusin/focusoutを解説

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

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

change()のサンプル

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

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

出力結果

change()については、下記の記事でも紹介しています。

【jQuery】フォーム要素でイベント発火させるchange()イベントを解説

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

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

submit()のサンプル

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

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

出力結果

See the Pen submit-sample by ZeroPlus (@zeroplus-programming) on CodePen.

submit()については、下記の記事でも紹介しています。

【jQuery】submit()イベントでフォームを制御する方法を解説

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

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

keydown()のサンプル

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

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

出力結果

keydown()については、下記の記事でも紹介しています。

【jQuery】キーボード操作でイベント発火するkeydown/keypress/keyupを解説

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

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

keypress()のサンプル

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

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

});

出力結果

keypress()については、下記の記事でも紹介しています。

【jQuery】キーボード操作でイベント発火するkeydown/keypress/keyupを解説

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

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

keyup()のサンプル

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

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

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

});

出力結果

keyup()については、下記の記事でも紹介しています。

【jQuery】キーボード操作でイベント発火するkeydown/keypress/keyupを解説

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

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

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

jQueryの画面変化イベント

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

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

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

scroll()のサンプル

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

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

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

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

});

出力結果

scroll()については、下記の記事でも紹介しています。

【jQuery】スクロールでイベント発火。scrollイベントについて解説。

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

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

resize()のサンプル

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

});

出力結果

resize()については、下記の記事でも紹介しています。

【jQuery】resize()で画面幅がリサイズ時の処理方法を解説

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

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

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

jQueryの読み込みイベント

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

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

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

ready()のサンプル

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

});

出力結果

ready()については、下記の記事でも紹介しています。

【jQuery】データ読み込みでイベント発火。ready/load/unloadイベントの使い方

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

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

load()のサンプル

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

});

出力結果

load()については、下記の記事でも紹介しています。

【jQuery】データ読み込みでイベント発火。ready/load/unloadイベントの使い方

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

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

unload()のサンプル

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

});

出力結果

unload()については、下記の記事でも紹介しています。

【jQuery】データ読み込みでイベント発火。ready/load/unloadイベントの使い方

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

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

error()のサンプル

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

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

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

出力結果

error()については、下記の記事でも紹介しています。

【jQuery】error()イベントを解説

まとめ

jQueryには制作でよく使われるクリックイベントから、タッチデバイス専用のスマホタッチイベントなどさまざまあります。それら複数のイベントを組み合わせて使用しましょう。基礎知識をインプットして実際に手を動かしてみましょう。

jQueryイベントまとめ

• クリックイベント：click(),dblclick(),mousedown(),mouseup(),contextmenu()
• マウスカーソルイベント：mousemove(),mouseover(),mouseout(),mouseenter(),mouseleave(),hover()
• スマホタッチイベント：touchstart(),touchend(),touchmove()
• フォームイベント：focus()、blur()、focusin()、focusout()、change()、submit()、keydown()、keypress()、keyup()
• 画面変化イベント：scroll()、resize()
• 読み込みイベント：ready()、load()、unload()、error()

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー