【6日でできるJavaScript入門】イベントハンドラ

　ユーザーの操作に応じてJavaScriptを実行するための仕組みがイベントハンドラです。クリックやマウス移動、ページの読み込みなど、特定のタイミングでコードを動かすことで、インタラクティブなWeb体験を実現します。

　ここでは、まず「イベントハンドラとは何か」を整理し、代表的な使い方をステップごとに学びます。各節には独立して動かせるサンプルHTMLを用意し、実際の出力結果とタグの詳しい解説を添えています。タイトルや見出しには絵文字を加え、視覚的にポイントを示しています。

１．イベントハンドラとは？

　イベントハンドラは、要素やページの状態変化にあわせてJavaScriptを呼び出す仕組みです。以下の表は基本をまとめたものです。。

用語説明
イベントユーザー操作やページ状態の変化（クリック／読み込み完了など）
ハンドラそのイベント発生時に実行されるJavaScriptの関数や命令文
イベントハンドラ名属性名としてHTMLタグに記述し、実行タイミングを指定する

ファイル名： lesson02-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎯 イベントハンドラ概要サンプル</title>
</head>
<body>
  <h1>🔔 イベントハンドラとは？</h1>
  <p id="info">ここにイベント発生の情報が表示されます。</p>
  <script>
    // ページ読み込み時のonload例
    window.onload = function() {
      document.getElementById('info').textContent = 'ページが読み込まれました。';
    };
  </script>
</body>
</html>

ブラウザの出力例

タグ解説

  • window.onload: ページ全体が読み込まれたタイミングで実行されるイベントハンドラ。
  • <script>: JavaScriptコードを配置する要素。

２．クリック時にJavaScriptを実行

要素をクリックしたときに動作させたい場合は、onclick イベントハンドラを使います。

イベントハンドラ名対象説明
onclick任意の要素クリック時に指定したコードを実行

ファイル名： lesson02-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔘 クリックイベントサンプル</title>
</head>
<body>
  <h1>👉 ボタンをクリック</h1>
  <button id="btn" onclick="document.getElementById('output').textContent = 'クリックされました！';">
    クリックしてね
  </button>
  <p id="output"></p>
</body>
</html>

ブラウザの出力例

タグ解説

  • <button onclick="...">： ボタン要素にクリック時の処理を直接記述。
  • document.getElementById('output').textContent： 要素の内容を変更するDOM操作。

３．マウスの移動時にJavaScriptを実行

　マウス操作に応じてコードを動かすには、onmouseover や onmouseout、onmousemove を使用します。

イベントハンドラ名説明
onmouseover要素上にマウスを乗せたとき
onmouseout要素からマウスを離したとき
onmousemove要素上でマウスを動かしたとき

ファイル名： lesson02-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🐭 マウス移動イベントサンプル</title>
</head>
<body>
  <h1>🎨 マウスを動かしてみよう</h1>
  <div id="box" onmouseover="this.style.backgroundColor='#def'"
       onmouseout="this.style.backgroundColor='#f5f5f5'"
       onmousemove="document.getElementById('coords').textContent = 'X=' + event.clientX + ', Y=' + event.clientY"
       style="width:300px;height:150px;border:1px solid #000;">
    <p id="coords">座標を表示</p>
  </div>
</body>
</html>

ブラウザの出力例

X=123, Y=45 （マウス位置によって変化）

タグ解説

  • <div onmouseover="..." onmouseout="..." onmousemove="...">： 複数のイベントを同一要素に指定。
  • event.clientX, event.clientY： マウス位置を取得するイベントオブジェクトのプロパティ。

４．その他のイベントハンドラ

ここまでで挙げた以外にも、多彩なイベントハンドラが用意されています。代表的なものをまとめました。

分類イベントハンドラ名説明
ページ操作onloadページ読み込み完了時
onunloadページ離脱時
onerrorエラー発生時
フォーム操作onfocus要素にフォーカスが移動したとき
onchange入力内容が変更されたとき
onsubmitフォームが送信されたとき
キーボードonkeydown、onkeyupキーが押された／離されたとき
タッチontouchstartタッチ操作開始時（スマホ・タブレット用）

ワンポイント
　直接HTMLに書く方法は手軽ですが、JavaScriptとHTMLの分離にはイベントリスナー（addEventListener）の利用を検討してください。

まとめ

　ここでは、イベントハンドラの基本概念と主要な使い方を学びました。各サンプルを動かし、ユーザー操作に応じた動的な振る舞いを体験したら、次はaddEventListenerによるより拡張性の高い実装方法へ進みましょう。