【JavaScript】addEventListenerで使えるイベントタイプ一覧

addEventListener メソッドで使用できるイベントハンドラー(イベントタイプ)のうち、代表的なものをカテゴリ別に紹介します。一部を除き、実装例も載せました。また、個人的に違いが分かりにくいものについては後半で簡単解説も。

目次

マウスイベント:10個

マウスのクリックや移動に伴って発火するイベントタイプです。
各ボタン毎に異なるイベントタイプをセットしており、ダイアログが表示されます。

click要素がクリックされたとき
click
dblclick要素がダブルクリックされたとき
dblclick
mousedownマウスボタンが押されたとき
mousedown
mouseupマウスボタンが離されたとき
mouseup
mousemoveマウスがボタン上を移動したとき
mousemove
mouseoverマウスがボタンの上に移動したとき
mouseover
mouseoutマウスがボタンの上から離れたとき
mouseout
mouseenterマウスがボタン要素に入ったとき
mouseenter
mouseleaveマウスがボタン要素から出たとき
mouseleave
contextmenuコンテキストメニューが開かれたとき
(右クリック)
contextmenu
JavaScript コード(HTML / CSSコードは未掲載)
document.getElementById('c-click').addEventListener('click', () => {
  alert('clickボタンがクリックされました。');
});

document.getElementById('c-dblclick').addEventListener('dblclick', () => {
  alert('dblclickボタンがダブルクリックされました。');
});

document.getElementById('c-mousedown').addEventListener('mousedown', () => {
  alert('mousedownボタン上でマウスボタンが押されました。');
});

document.getElementById('c-mouseup').addEventListener('mouseup', () => {
  alert('mouseupボタン上でマウスボタンが離されました。');
});

document.getElementById('c-mousemove').addEventListener('mousemove', () => {
  alert('マウスがmousemoveボタン上を移動しました。');
});

document.getElementById('c-mouseover').addEventListener('mouseover', () => {
  alert('マウスがmouseoverボタンの上に移動しました。');
});

document.getElementById('c-mouseout').addEventListener('mouseout', () => {
  alert('マウスがmouseoutボタンの上から離れました。');
});

document.getElementById('c-mouseenter').addEventListener('mouseenter', () => {
  alert('マウスがmouseenterボタン要素に入りました。');
});

document.getElementById('c-mouseleave').addEventListener('mouseleave', () => {
  alert('マウスがmouseleaveボタン要素から出ました。');
});

document.getElementById('c-contextmenu').addEventListener('contextmenu', () => {
  alert('contextmenuボタン上でコンテキストメニューを開きました。');
});

clickmousedownはイベント発生のタイミングが異なる

どちらもマウス操作(クリック)に関連するイベントですが、発生タイミングやマウスボタンの種類(左・中・右)が異なります。

click

マウスボタンが押されて離れたとき。(クリック操作が完了したとき。)
通常は左マウスボタンのみに対応する。

mousedown

マウスボタンが押されたとき。
どのマウスボタン(左・中・右)でもイベントが発生する。

mouseover/mouseoutmouseenter/mouseleaveはバブリングの有無が異なる

どちらもマウス操作(移動)に関連するイベントですが、mouseover/mouseoutはバブリングし、mouseenter/mouseleaveはバブリングしないという点が異なります。

mouseover/mouseout

イベントはバブリングし、要素とその子要素に対して発生する。

mouseenter/mouseleave

イベントはバブリングせず、要素自体に対してのみ発生する。

バブリング(イベントバブリング)とは、イベントが最も深いネストされた要素(ターゲット要素)から始まり、親要素に向かって段階的に伝播していく仕組みを指します。(反対に、イベントが親要素から始まってターゲット要素に伝播していく仕組みを「キャプチャリングフェーズ」といいます。)

例)

<div id="parent">
  <button id="child">Click</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', () => {
    console.log('Parent clicked');
  });

  document.getElementById('child').addEventListener('click', () => {
    console.log('Child clicked');
  });
</script>

ここで「Click」ボタンをクリックすると、まずターゲット要素のイベントconsole.log('Parent clicked');が発生し、次に親要素のイベントconsole.log('Parent clicked');が発生します。このようにイベントが伝播する仕組みを「バブリング」といいます。

キーボードイベント:3個

キーボードを押したり離したりすることに伴って発火するイベントタイプです。
各フォームに異なるイベントタイプをセットしています。各フォームにフォーカスされている状態でキーボードを操作すると、ダイアログが表示されます。

keydownキーが押されたとき
keyupキーが離されたとき
keypress特定のキーが押されたとき

将来的に廃止予定のため非推奨

JavaScript コード(HTML / CSSコードは未掲載)
document.getElementById('c-keydown').addEventListener('keydown', () => {
  alert('keydownボタン上で何らかのキーが押されました。');
});

document.getElementById('c-keyup').addEventListener('keyup', () => {
  alert('keyupボタン上で何らかのキーが離されました。');
});

document.getElementById('c-keypress').addEventListener('keypress', () => {
  alert('keypressボタン上で何らかのキーが押されました。');
});

keydownkeypress は対象となるキーとタイミングが異なる

どちらもキーボード操作に関するイベントですが、イベント発生の対象となるキーとタイミングが異なります。

keydown

すべてのキーに対して発生し、キーが押されている間継続的に発生する

keypress

文字キーに対してのみ発生する。(修飾キー:Shift、Ctrl、Altなどやファンクションキー:F1-F12、矢印キー、変換を伴う入力には発生しない。)

keypressは将来廃止される予定のため非推奨になっています。基本的にはkeydownkeyupを使うようにしましょう。

フォームイベント:6個

フォームを送信したり入力したりすることで発火するイベントタイプです。
各フォームに異なるイベントタイプをセットしており、それぞれのフォームで特定の操作を行うとダイアログが表示されます。

submitフォームが送信されたとき
resetフォームがリセットされたとき
change入力内容が変更されたとき
input入力内容が変更されたとき
focusフォームがフォーカスされたとき
blurフォームがフォーカスから外れたとき
JavaScript コード(HTML / CSSコードは未掲載)
document.getElementById('c-submit').addEventListener('submit', () => {
  event.preventDefault();
  alert('フォームが送信されました。');
});

document.getElementById('c-reset').addEventListener('reset', () => {
  alert('フォームがリセットされました。');
});

document.getElementById('c-change').addEventListener('change', () => {
  alert('入力内容が変更されました。');
});

document.getElementById('c-input').addEventListener('input', () => {
  alert('入力内容が変更されました。');
});

document.getElementById('c-focus').addEventListener('focus', () => {
  alert('フォームがフォーカスされました。');
  document.getElementById('c-focus').blur(); // フォーカスを外す(外さないと無限ループになる)
});

document.getElementById('c-blur').addEventListener('blur', () => {
  alert('フォームがフォーカスから外れました。');
  document.getElementById('c-blur').blur(); // フォーカスを外す(外さないと無限ループになる)
});

changeinput はイベント発生のタイミングが異なる

どちらもインプット要素の値が変化したときに発生するイベントタイプですが、そのタイミングが異なります。

change

値を変更して確定したタイミング(フォーカスが外れたタイミング)で発生する。

input

値を変更/入力/削除したタイミングで発生する。(編集中でも発生する。)

inputは、ユーザーが入力している途中で何かを実行したい場合に使用します。リアルタイムの入力チェックや、入力内容に基づいてインタラクティブなフィードバックを提供したい場合などに使用します。

ウィンドウイベント:4個

load

ページが完全に読み込まれたとき

unload

ページがアンロードされたとき

resize

ウィンドウのサイズが変更されたとき

scroll

ウィンドウまたは要素がスクロールされたとき

こちらの実装例はありません。

タッチイベント(モバイルデバイス向け):4個

touchstart

タッチが開始されたとき

touchmove

タッチが移動したとき

touchend

タッチが終了したとき

touchcancel

タッチがキャンセルされたとき

タッチイベントについては、以下記事で実装例などを詳しく紹介しています。(本記事での実装例や解説は省略します。)

その他のイベント:7個

DOMContentLoaded

HTML文書の完全な読み込みと解析が終わったとき

transitionend

CSSトランジションが終了したとき

animationend

CSSアニメーションが終了したとき

dragstart

要素のドラッグが開始されたとき

drag

要素がドラッグされているとき

dragover

要素がドラッグされている要素の上にあるとき

drop

ドラッグされた要素がドロップされたとき

こちらの実装例はありません。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次