JavaScriptで使えるブラウザ上のイベントまとめ

JavaScriptでブラウザ上で使えるイベントについて、初心者でも理解しやすい解説とサンプルコードを紹介します。

ブラウザ上で利用できるJavaScriptのイベントってどんなものがありますか？

マウスのクリックイベントや、キーボードの入力のイベント、フォーム操作時のイベントなどがあります。

ブラウザ上で利用できるイベントまとめ

イベントは、ユーザーアクションやページの状態変化に応じて発生します。ブラウザ上で利用できる主なイベントについて、以下のようなものがあります。

分類	イベント名	発生タイミング
マウス	click	マウスボタンがクリックされた時
マウス	mouseover	マウスカーソルが要素に乗った時
マウス	mouseout	マウスカーソルが要素から外れた時
マウス	mousedown	マウスボタンが押された時
マウス	mouseup	マウスボタンが離された時
マウス	mousemove	マウスカーソルが要素上で移動した時
マウス	mouseenter	マウスカーソルが要素内に入った時
マウス	mouseleave	マウスカーソルが要素内から出た時
キー	keydown	キーボードのキーが押された時
キー	keyup	キーボードのキーが離された時
キー	keypress	キーボードのキーが押されている間に文字が入力された時
フォーム	submit	フォームが送信された時
フォーム	reset	フォームがリセットされた時
フォーム	change	フォームの値が変更された時
フォーム	focus	フォーム要素にフォーカスが当てられた時
フォーム	blur	フォーム要素からフォーカスが外れた時
フォーム	focusin	フォーム要素にフォーカスが当てられた時（バブリングあり）
フォーム	focusout	フォーム要素からフォーカスが外れた時（バブリングあり）
その他	load	ページや画像などが読み込まれた時
その他	unload	ページがアンロードされた時
その他	resize	ウィンドウのサイズが変更された時
その他	scroll	スクロールされた時

ブラウザ上で利用できる主なイベント

クリックイベントの解説とサンプル

　クリックイベントとは、ユーザーが要素をクリックしたときに発生するイベントです。addEventListener()メソッドを使用してクリックイベントを設定することができます。

document.getElementById("btn").addEventListener("click", function(){
  alert("ボタンがクリックされました！");
});

マウスオーバーイベントの解説とサンプル

　マウスオーバーイベントとは、要素にマウスカーソルが重なった際に発生するイベントです。addEventListener()メソッドを使用してマウスオーバーイベントを設定することができます。

document.getElementById("btn").addEventListener("mouseover", function(){
  document.getElementById("btn").style.backgroundColor = "yellow";
});

上記のコードでは、idが”btn”の要素にマウスカーソルが重なった際に、要素の背景色が黄色に変更されます。

キーボードイベントの解説とサンプル

　キーボードイベントとは、キーボードのキーが押された際に発生するイベントです。addEventListener()メソッドを使用してキーボードイベントを設定することができます。

document.addEventListener("keydown", function(event){
  console.log("キーが押されました！キーコード：" + event.keyCode);
});

上記のコードでは、キーが押された際に、コンソールに”キーが押されました！キーコード：[押されたキーのコード]”と表示されます。

mouseenterイベントとmouseleaveイベントの解説

mouseenter イベントと mouseleave イベントについて解説します

マウスカーソルが要素内に入った時に発生するmouseenterイベント

　mouseenter イベントは、マウスカーソルが要素内に入った時に発生します。ただし、要素内の子要素に入った時には発生しません。また、mouseover イベントと異なり、要素内を移動しても発生しません。

マウスカーソルが要素から出た時に発生するmouseleaveイベント

　mouseleave イベントは、マウスカーソルが要素から出た時に発生します。要素内の子要素から出た時にも発生します。また、mouseout イベントと異なり、要素内を移動しても発生しません。

mouseleave イベントは、要素から出たことを検知する場合に使われます。例えば、メニューなどでサブメニューが表示されるような場合に、メインメニューに mouseleave イベントを設定して、マウスがメインメニューから出た時にサブメニューを非表示にするといった使い方があります。

mouseenterイベントとmouseleaveイベントのサンプル

サンプルコードを用いて、mouseenter イベントと mouseleave イベントの動作を確認してみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>マウスイベント</title>
</head>
<body>
  <div id="target" style="width: 200px; height: 200px; background-color: #f00;"></div>
  <script>
    const target = document.getElementById('target');

    target.addEventListener('mouseenter', function() {
      target.style.backgroundColor = '#0f0';
    });

    target.addEventListener('mouseleave', function() {
      target.style.backgroundColor = '#f00';
    });
  </script>
</body>
</html>

　上記のコードでは、target という ID を持つ div 要素に mouseenter イベントと mouseleave イベントを設定しています。マウスカーソルが div 要素に入った時は背景色が緑に、div 要素から出た時は背景色が赤に変わるようになっています。

mouseenter／mouseleaveとmouseover／mouseoutの違い

　mouseenter イベントと mouseleave イベント、および mouseover イベントと mouseout イベントは似たようなイベントであるため混同されることがありますが、それぞれに違いがあります。

mouseover イベントは、マウスカーソルが要素上に乗った時に発生します。要素内を移動するたびに、要素内の子要素にカーソルが乗ったとしても mouseover イベントが発生します。

mouseout イベントは、マウスカーソルが要素から離れた時に発生します。要素内から子要素に移動した場合でも mouseout イベントが発生します。

　一方、mouseenter イベントは、マウスカーソルが要素上に乗った時に発生します。要素内を移動するたびに、要素内の子要素にカーソルが乗った場合でも、mouseenter イベントは発生しません。

　同様に、mouseleave イベントは、マウスカーソルが要素から離れた時に発生します。要素内から子要素に移動した場合でも、mouseleave イベントが発生します。

　つまり、mouseover イベントと mouseout イベントは、要素内の子要素上にマウスカーソルが乗った場合でもイベントが発生するのに対して、mouseenter イベントと mouseleave イベントは、要素内の子要素上にマウスカーソルが乗った場合はイベントが発生しない点が異なります。

focus／blurとfocusin／focusoutの違い

　フォーム要素には、フォーカスが当たっている状態とそうでない状態があります。フォーカスが当たっている状態とは、キーボードやマウスの操作がそのフォーム要素に対して直接適用される状態を指します。フォーカスが当たっているフォーム要素は、ユーザーが操作可能な状態であることが多く、例えばテキストボックスに文字を入力するためには、まずフォーカスを当てる必要があります。

　フォーカスが当たっている状態とそうでない状態を検知するために、 focus イベントと blur イベントがあります。これらのイベントは、フォーム要素がフォーカスを得たり失ったりしたときに発生します。

　一方、focusin イベントと focusout イベントは、focus イベントと blur イベントと似たようなイベントですが、異なる点があります。focusin イベントと focusout イベントは、focus イベントと blur イベントと違って、イベントが発生する要素がネストしている場合に、親要素から子要素へのフォーカスの移動にも反応する点が異なります。

　例えば、以下のように HTML 要素がネストしている場合、focus イベントは子要素にフォーカスが当たっている場合には発生しますが、focusin イベントは親要素にフォーカスが当たっている場合にも発生します。

<div id="parent">
  <input type="text" id="child">
</div>

　つまり、focus イベントと blur イベントは、フォーム要素のフォーカスの移動に反応するイベントであり、focusin イベントと focusout イベントは、親子関係にある要素のフォーカスの移動にも反応するイベントであるという違いがあります。

上記の違いを確認するために、下記のサンプルコードを実行してみてください。focus イベントと blur イベント、および focusin イベントと focusout イベントが発生するタイミングが異なることがわかると思います。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

JavaScriptでブラウザ上で使えるイベントについて解説しました。

イベントは、ユーザーアクションやページの状態変化に応じて発生する。
マウスイベントには、click、mousedown、mouseup、mousemove、mouseenter、mouseleaveなどがある。
キーボードイベントには、keydown、keyup、keypressなどがある。
フォームイベントには、submit、reset、focus、blur、change、selectなどがある。
その他のイベントには、load、unload、resize、scrollなどがある。

どんなイベントがあり、どういった使い方をしたら良いのかよくわかりました！

JavaScriptのイベントについて理解することは、Webページの動的なコンテンツを作成する上で重要です。イベントの発生タイミングや、イベントハンドラーの設定方法をしっかりと把握しておくことで、高度なWebアプリケーションを開発することができます。また、イベントの利用にあたっては、必ずアクセシビリティにも配慮するようにしましょう。