JavaScriptイベント一覧徹底解説！30個の使い方と応用例

はじめに

JavaScriptのイベントは、クリック、入力、スクロール、読み込みなどをきっかけに処理を動かす仕組みです。addEventListener()、Event、event.target、preventDefault()の関係を押さえると、コードの見通しが変わります。

このページでは、JavaScriptイベント一覧と30個の例を、整理します。onclick属性とaddEventListener()は用途が異なるため、違いも整理するのが基本です。

JavaScriptイベントとは

結論から言えば、JavaScriptイベントは「何かが起きたときに関数を呼ぶ」入口です。たとえば<button>が押されるとclickが発生し、登録された関数が実行対象になります。

その仕組みはDOMのEventTargetに支えられており、ElementやDocumentなどがイベントを受け取ります。公式ドキュメントによれば、MDNのaddEventListener()解説では、対象に届いたイベントで関数を呼ぶメソッドとされているのが目安です。

イベントオブジェクトにはtype、target、keyなどの情報が入りますし、ここがポイントです。その値で対象要素や入力内容を切り替えられます。

配列処理も押さえると、イベント後の一覧操作が読みやすくなるのがポイントです。JavaScriptのforEachでreturnを活用する6つのテクニックやforEach・mapの使い分け術10選が参考になります。

JavaScriptイベント一覧

イベントハンドラー

イベントハンドラー属性は、HTMLへ直接処理を書く方法です。短い例では明確ですが、処理が増えるとHTMLとscriptの境界が曖昧になります。

<button onclick="alert('クリックされました！')">クリックしてください</button>

結果: 期待される表示は、ボタンのクリックで「クリックされました！」というアラートが開く動作です。onclick属性に短い処理を直接書いています。

イベントリスナー

イベントリスナーは、JavaScript側で対象要素を取得し、addEventListener()にイベント名と関数を渡す方法です。処理を外部ファイルへ移しやすい形にできるのが一般的です。

<button id="myButton">クリックしてください</button>
<script>
  document.getElementById('myButton').addEventListener('click', function() {
    alert('クリックされました！');
  });
</script>

結果: 期待される表示は、ボタンのクリックで同じアラートが開く動作です。HTMLにはidだけを置き、処理は<script>内へ分けています。

一方、リスナーを外す処理では、removeEventListener()に同じ関数参照を渡します。JavaScriptにおけるイベントハンドラを完全ガイドでも、属性方式とリスナー方式の違いを合わせて読むと理解しやすいでしょう。

イベントのカスタマイズ

イベントのカスタマイズでは、条件分岐、既定動作の抑制、伝播を組み合わせますし、ここがポイントです。たとえばkeydownでevent.keyを見れば、Enterキーだけに反応できるのが基本です。

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('エンターキーが押されました！');
  }
});

結果: 期待される出力は、Enterキーを押したときだけアラートが開く動作です。event.keyがEnterと一致する場合に処理を進めています。

これに加えて、送信を止めるならpreventDefault()、伝播を止めるならstopPropagation()を使いるのが現実的です。ただし、伝播の停止は必要な範囲に限定します。

仕様の全体像は、MDNのEventインターフェイスで確認できると整理できます。特にtargetとcurrentTargetの違いは、イベント委任でつまずきやすい点です。

30個のイベントサンプルは、短いHTMLで発火タイミングを確認する教材として使えます。ブラウザ制約があるイベントでは注記も合わせて確認するのがポイントです。

イベント1：onclick

<button onclick="alert('クリックされました！')">クリックしてください</button>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント2：ondblclick

<p ondblclick="alert('ダブルクリックされました！')">ダブルクリックしてください</p>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント3：onmousedown

<div onmousedown="alert('マウスボタンが押されました！')" style="width: 100px; height: 100px; background-color: lightblue;">マウスボタンを押してください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント4：onmouseup

<div onmouseup="alert('マウスボタンが離されました！')" style="width: 100px; height: 100px; background-color: lightgreen;">マウスボタンを離してください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント5：onmousemove

<div onmousemove="alert('マウスカーソルが移動しました！')" style="width: 100px; height: 100px; background-color: lightyellow;">マウスカーソルを移動してください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント6：onmouseover

<div onmouseover="alert('マウスカーソルが要素に入りました！')" style="width: 100px; height: 100px; background-color: lightpink;">マウスカーソルを要素に入れてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント7：onmouseout

<div onmouseout="alert('マウスカーソルが要素から出ました！')" style="width: 100px; height: 100px; background-color: lightgray;">マウスカーソルを要素から出してください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント8：onmouseenter

<div onmouseenter="alert('マウスカーソルが要素に入りました！')" style="width: 100px; height: 100px; background-color: lightsalmon;">マウスカーソルを要素に入れてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント9：onmouseleave

<div onmouseleave="alert('マウスカーソルが要素から出ました！')" style="width: 100px; height: 100px; background-color: lightcyan;">マウスカーソルを要素から出してください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント10：onkeydown

<input type="text" onkeydown="alert('キーが押されました！')" placeholder="キーを押してください">

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント11：onkeyup

<input type="text" onkeyup="alert('キーが離されました！')" placeholder="キーを離してください">

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント12：onkeypress

<input type="text" onkeypress="alert('キーが押されました！')" placeholder="キーを押してください">

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント13：onfocus

<input type="text" onfocus="alert('フォーカスが当たりました！')" placeholder="フォーカスしてください">

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント14：onblur

<input type="text" onblur="alert('フォーカスが外れました！')" placeholder="フォーカスを外してください">

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント15：onchange

<select onchange="alert('値が変更されました！')">
  <option>選択してください</option>
  <option>オプション1</option>
  <option>オプション2</option>
</select>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント16：onsubmit

<form onsubmit="event.preventDefault(); alert('フォームが送信されました！');">
  <input type="submit" value="送信">
</form>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント17：onreset

<form onreset="alert('フォームがリセットされました！');">
  <input type="reset" value="リセット">
</form>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント18：onload

<body onload="alert('ページが読み込まれました！');">

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント19：onunload

<body onunload="alert('ページが閉じられました！');">

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント20：onresize

<body onresize="alert('ウィンドウがリサイズされました！');">

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント21：onscroll

<div onscroll="alert('スクロールしました！');" style="width: 100px; height: 100px; overflow: auto;">
  <div style="width: 1000px; height: 1000px; background-color: lightblue;"></div>
</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント22：ondragstart

<div draggable="true" ondragstart="alert('ドラッグが始まりました！');" style="width: 100px; height: 100px; background-color: lightblue;">ドラッグしてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント23：ondragend

<div draggable="true" ondragend="alert('ドラッグが終わりました！');" style="width: 100px; height: 100px; background-color: lightgreen;">ドラッグしてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント24：ondragenter

<div ondragenter="alert('ドラッグされた要素が入りました！');" style="width: 100px; height: 100px; background-color: lightyellow;">ここにドラッグしてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント25：ondragleave

<div ondragleave="alert('ドラッグされた要素が出ました！');" style="width: 100px; height: 100px; background-color: lightpink;">ここからドラッグしてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント26：ondragover

<div ondragover="event.preventDefault(); alert('ドラッグされた要素が動かされています！');" style="width: 100px; height: 100px; background-color: lightgray;">ここでドラッグしてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント27：ondrop

<div ondrop="event.preventDefault(); alert('ドラッグされた要素がドロップされました！');" style="width: 100px; height: 100px; background-color: lightsalmon;">ここにドロップしてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント28：oncontextmenu

<div oncontextmenu="event.preventDefault(); alert('カスタムコンテキストメニューを表示します！');" style="width: 100px; height: 100px; background-color: lightcyan;">右クリックしてください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント29：onwheel

<div onwheel="alert('マウスホイールを操作しました！');" style="width: 100px; height: 100px; background-color: lightcoral;">ここでマウスホイールを操作してください</div>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

イベント30：onbeforeunload

<script>
window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = 'ページを離れる前に確認ダイアログを表示しますか？';
});
</script>

結果: 期待される表示は、条件に応じてアラートが開く動作です。

公式ドキュメントによれば、MDNのbeforeunloadイベントは一部環境で制約があります。保存前の警告に限定し、通常のナビゲーション制御には使いすぎない設計が合います。

応用例とサンプルコード

応用例では、単体のイベントを組み合わせてUIの流れを作りますが、これは押さえたい点です。ドラッグ＆ドロップ、スライドショー、リアルタイム検索で一覧の知識を画面部品へつなげますが、これは押さえたい点です。

応用例1：ドラッグ＆ドロップ機能

ドラッグ＆ドロップでは、dragstartで対象を記録し、dragoverでドロップ許可、dropで配置を確定します。この流れではdataTransferとappendChild()が中心になると理解できます。

<style>
  .dropzone {
    width: 200px;
    height: 200px;
    border: 2px dashed gray;
    text-align: center;
    padding-top: 80px;
  }
  .draggable {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    cursor: move;
  }
</style>
<script>
  function allowDrop(event) {
    event.preventDefault();
  }
  function drag(event) {
    event.dataTransfer.setData('text', event.target.id);
  }
  function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData('text');
    event.target.appendChild(document.getElementById(data));
  }
</script>
<div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">ここにドロップしてください</div>
<div id="item" draggable="true" ondragstart="drag(event)" class="draggable">ドラッグしてください</div>

結果: 期待される表示は、水色の要素を点線の領域へドラッグして移動できる画面です。setData()でIDを保存し、getData()で取り出してDOMへ追加しています。

応用例2：スライドショー

スライドショーでは、clickを起点に現在位置を増減し、表示する画像だけdisplayを切り替えます。画像一覧を配列のように扱うため、getElementsByClassName()で取得した要素群を順番に処理すると覚えるとよいでしょう。

<style>
  .slides {
    display: none;
  }
  .active {
    display: block;
  }
</style>
<script>
  var slideIndex = 1;
  function showSlides(n) {
    var slides = document.getElementsByClassName('slides');
    if (n > slides.length) {
      slideIndex = 1;
    }
    if (n < 1) {
      slideIndex = slides.length;
    }
    for (var i = 0; i < slides.length; i++) {
      slides[i].style.display = 'none';
    }
    slides[slideIndex - 1].style.display = 'block';
  }
  function changeSlides(n) {
    showSlides(slideIndex += n);
  }
  showSlides(slideIndex);
</script>
<img class="slides" src="https://via.placeholder.com/500x300?text=Slide+1" />
<img class="slides" src="https://via.placeholder.com/500x300?text=Slide+2" />
<img class="slides" src="https://via.placeholder.com/500x300?text=Slide+3" />
<button onclick="changeSlides(-1)">前へ</button>
<button onclick="changeSlides(1)">次へ</button>

結果: 期待される表示は、前へボタンと次へボタンで表示画像が切り替わる画面です。slideIndexが範囲外になった場合は先頭または末尾へ戻ります。

応用例3：リアルタイム検索

リアルタイム検索では、inputが発生するたびに入力値を読み、<li>のテキストと照合します。小さな一覧なら単純なループで十分ですが、大きなデータでは検索対象を絞る工夫が必要になると考えられますし、これが一つの目安です。

<input type="text" id="searchInput" oninput="search()" placeholder="検索...">
<ul id="searchList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
  <li>Fig</li>
  <li>Grape</li>
</ul>
<script>
  function search() {
    var input, filter, ul, li, i, txtValue;
    input = document.getElementById('searchInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById('searchList');
    li = ul.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
      txtValue = li[i].textContent || li[i].innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = '';
      } else {
        li[i].style.display = 'none';
      }
    }
  }
</script>

結果: 期待される表示は、検索欄へ文字を入力すると一致しないリスト項目が非表示になる動作です。toUpperCase()で大文字小文字の差を吸収し、style.displayで表示を切り替えています。

まとめ

JavaScriptイベントは、ブラウザ上の操作や状態変化を処理へ結び付ける仕組みです。クリック、キー入力、フォーム、読み込み、ドラッグ、スクロールの一覧を分類しておくと、作りたいUIから適切なイベントを選びやすくなるのが一般的です。

その中心になるのはaddEventListener()、Event、preventDefault()、event.targetです。HTML属性のonclickは短い学習例に向きますが、処理を増やす画面ではJavaScript側でリスナーを登録する構成が読みやすいと言えます。

ただし、keypress、unload、beforeunloadのように現在のブラウザで扱いに注意が必要なイベントもあると言えるでしょう。公式ドキュメントを確認し、目的に合う代替を選ぶ姿勢が保守性につながるでしょう。

これらのサンプルを土台にすると、ボタン、フォーム、一覧検索、ドラッグ操作を組み合わせたインタラクティブなWebページを設計できます。イベントの粒度を小さく保ち、関数名と役割をそろえることが読みやすいコードへの近道です。

関連するUIなら、拡張子の扱いやカレンダー作成もイベント処理と組み合わせやすいテーマです。

関連記事

• JavaScriptのforEachでreturnを活用する6つのテクニック
• JavaScriptエンジニア必見！forEach・mapの”目からウロコ”な使い分け術10選
• JavaScriptにおけるイベントハンドラを完全ガイド！20選の実践サンプルコード付き
• JavaScriptで拡張子を活用する方法12選！初心者でも簡単にできる方法を紹介
• JavaScriptでカレンダーを作成！サンプルコード10選で簡単理解

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。