【JavaScript入門 #02】マウスイベントで動きをつけてみよう！

6/24/2025

著者: yasuzaki

カテゴリ: JavaScript

タグ:

今回の目標

前回はボタンをクリックして文字を変える基本的な動きを学びました。今回は、マウスの動き（mouseover・mouseout）に反応するイベントを使って、インタラクティブな表現にチャレンジします。

マウスイベントとは？

JavaScriptでは、ユーザーの操作に応じて「イベント」が発生します。今回は以下の2つを使います：

mouseover … マウスカーソルが要素の上に乗ったとき
mouseout … カーソルが要素から離れたとき

HTMLとJavaScriptのコード例

以下のコードを index.html に記述してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>マウスイベントの例</title>
    <style>
      #box {
        width: 300px;
        height: 150px;
        background-color: lightgray;
        text-align: center;
        line-height: 150px;
        font-size: 20px;
        margin: 50px auto;
        transition: background-color 0.3s;
      }
    </style>
  </head>
  <body>
    <div id="box">マウスをのせてみよう</div>

    <script>
      const box = document.getElementById("box");

      box.addEventListener("mouseover", function () {
        box.style.backgroundColor = "skyblue";
        box.textContent = "のったよ！";
      });

      box.addEventListener("mouseout", function () {
        box.style.backgroundColor = "lightgray";
        box.textContent = "マウスをのせてみよう";
      });
    </script>
  </body>
</html>

コード解説

addEventListener("mouseover", function...) … 要素にマウスが乗ったときの処理を指定
style.backgroundColor … 背景色を変えるプロパティ
textContent … 表示テキストを変更
mouseout イベントで元に戻す処理を指定

よくあるつまずきポイント

イベント名のスペルミス（例：mousover など）
.style. の後に = を忘れている
getElementById() で正しいID名を指定していない

補足：イベントの種類

マウス以外にもイベントはたくさんあります：

click … クリックしたとき
keydown … キーボードを押したとき
submit … フォームを送信したとき

JavaScriptは、こうしたイベントをきっかけにして動作を定義していくのが基本です。

まとめ

addEventListener でイベントに反応する処理が書ける
mouseover と mouseout を使えば、見た目の変化を動的に付けられる
イベント駆動型で、ユーザーと対話する動きが可能になる

次回予告

次回は、**「フォーム入力に反応して文字を表示する」**という実用的なイベント処理に挑戦します！