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

はじめに
●JavaScriptイベントとは
●JavaScriptイベント一覧
- ○イベントハンドラー
- ○イベントリスナー
●イベントのカスタマイズ
●応用例とサンプルコード
まとめ

はじめに

この記事を読めば、JavaScriptイベントを使ってウェブアプリケーションを効果的に開発することができるようになります。

●JavaScriptイベントとは

JavaScriptイベントは、ブラウザ上で起こる様々な動作や変化を検出し、それに応じてJavaScriptのコードを実行するための仕組みです。

●JavaScriptイベント一覧

JavaScriptには多くのイベントが用意されており、下記はその一部です。

onclick：要素がクリックされたときに発生
ondblclick：要素がダブルクリックされたときに発生
onmousedown：マウスボタンが押されたときに発生
onmouseup：マウスボタンが離されたときに発生
onmousemove：マウスカーソルが要素上で移動したときに発生
onmouseover：マウスカーソルが要素に入ったときに発生
onmouseout：マウスカーソルが要素から出たときに発生
onmouseenter：マウスカーソルが要素に入ったときに発生（子要素には伝播しない）
onmouseleave：マウスカーソルが要素から出たときに発生（子要素には伝播しない）
onkeydown：キーが押されたときに発生
onkeyup：キーが離されたときに発生
onkeypress：キーが押されたときに発生（特定の文字キーのみ）
onsubmit：フォームが送信されるときに発生
onreset：フォームがリセットされるときに発生
onchange：フォーム要素の値が変更されたときに発生
oninput：フォーム要素の値が変更される度に発生
onfocus：要素がフォーカスを受け取ったときに発生
onblur：要素がフォーカスを失ったときに発生
onload：ページや要素が読み込まれたときに発生
onunload：ページが閉じられるときに発生
onbeforeunload：ページが閉じられる直前に発生
onerror：エラーが発生したときに発生
onresize：ウィンドウや要素のサイズが変更されたときに発生
onscroll：要素がスクロールされたときに発生
oncontextmenu：コンテキストメニューが表示されるときに発生
onselect：テキストが選択されたときに発生
ondrag：要素がドラッグされているときに発生
ondragstart：要素のドラッグが開始されたときに発生
ondragend：要素のドラッグが終了したときに発生
onwheel：マウスホイールが操作されたときに発生

イベントの使い方イベントは主に2つの方法で使われます。

○イベントハンドラー

HTML要素に直接イベント属性を追加する方法です。

例えば、ボタンがクリックされたときにアラートを表示する場合、下記のように記述します。

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

○イベントリスナー

JavaScriptコード内でイベントリスナーを追加する方法です。

例えば、ボタンがクリックされたときにアラートを表示する場合、下記のように記述します。

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

●イベントのカスタマイズ

イベントはカスタマイズすることができます。

例えば、特定のキーが押されたときにイベントを発火させる場合、下記のように記述します。

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

30個のイベントとサンプルコードそれぞれのイベントについて、簡単なサンプルコードを紹介します。

○イベント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

入力要素の値が変更されたときにアラートを表示する例です。

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

●応用例とサンプルコード

ここでは、いくつかのJavaScriptイベントを組み合わせた応用例とサンプルコードを紹介します。

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

ondragstart、ondragover、ondropイベントを使って、ドラッグ＆ドロップ機能を実装する例です。

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

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

onclickイベントを使って、シンプルなスライドショーを作成する例です。

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

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

oninputイベントを使って、入力内容に応じてリストからリアルタイムで検索結果を表示する例です。

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