JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのイベントハンドラとは？基本の仕組みと代表的なイベントの使い方

イベントとは何か

JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作したときに発生する「イベント」を通じて行われます。

たとえば、ページが読み込まれること自体が一つのイベントであり、ボタンがクリックされればそのクリックもイベントです。ほかにも、キーを押す、ウィンドウを閉じる、ウィンドウサイズを変更するなど、さまざまな操作がイベントとして検知されます。これらのイベントに対して実行したい処理（関数）を結びつける仕組みが「イベントハンドラ」です。

ここからは、特によく使われる代表的なイベントタイプを、実際に動かせるサンプルコードとともに見ていきましょう。

onclick イベントタイプ

最も使用頻度の高いイベントタイプで、ユーザーがマウスの左ボタンをクリックした瞬間に発生します。入力内容のバリデーション（検証）や警告ダイアログの表示など、さまざまな処理をこのイベントに紐づけられます。

以下のサンプルでは、ボタンをクリックするとアラートが表示されます。

<html>
  <head>
    <script>
      function sayHello() {
        alert("Hello World");
      }
    </script>
  </head>
  <body>
    <p>次のボタンをクリックして結果を確認してください</p>
    <form>
      <input type="button" onclick="sayHello()" value="Say Hello" />
    </form>
  </body>
</html>

onmouseover と onmouseout

この2つのイベントタイプを組み合わせると、画像やテキストに対して視覚的な演出を加えられます。

  • onmouseover：マウスカーソルが要素の上に乗った瞬間に発生
  • onmouseout：マウスカーソルが要素から離れた瞬間に発生

以下のように、div要素にマウスを乗せたり外したりすることで、それぞれ異なる処理を実行できます。

<html>
  <head>
    <script>
      function over() {
        document.getElementById("area").innerHTML = "Mouse Over";
      }
      function out() {
        document.getElementById("area").innerHTML = "Mouse Out";
      }
    </script>
  </head>
  <body>
    <p>マウスを下の枠内に入れたり出したりして結果を確認してください</p>
    <div id="area" onmouseover="over()" onmouseout="out()"
         style="width:200px;height:60px;border:1px solid #999;">
      <h2>ここはdivの中です</h2>
    </div>
  </body>
</html>

※ 元のサンプルで使われていた document.write() は、ページ読み込み後に呼び出すと画面全体を上書きしてしまうため、上記では innerHTML を使うより安全な書き方に置き換えています。

補足：現代の主流は addEventListener()

HTMLタグの属性に直接イベントハンドラを書く方法は手軽ですが、近年ではJavaScript側で addEventListener() を使って登録するのが標準的なスタイルです。HTMLとスクリプトを分離できるうえ、同一要素に複数のイベントを追加できるメリットがあります。

// 例：IDが myBtn のボタンにクリックイベントを登録
const btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert("Hello World");
});

  1. JavaScriptのイベントとは？仕組みと使い方を初心者向けに解説

    JavaScriptのイベントとはJavaScriptとHTMLの連携は、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて実現されます。たとえば、ページが読み込まれたとき、それはイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもまたイベントとなります。このほかにも、キーの押下、ウィンドウを閉じる操作、ウィンドウサイズの変更など、さまざまなアクションがイベントとして扱われます。イベントはDocument Object Model（DOM）Level 3の一部として定義されており、すべてのHTML要素には、JavaScriptのコードを実行できる一連のイベント

  2. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が