zukucode
主にWEB関連の情報を技術メモとして発信しています。
JavaScript

JavaScript イベントを設定・追加する方法

JavaScriptでロードイベントやクリックイベントなどのイベントを設定する方法を紹介します。

直接htmlに埋め込む

htmlのボタンなどの要素の属性にonclickやonchangeなどのイベントを直接記載する方法です。

古い方法なので現在はあまり使われていない方法ですが、規模の小さいシンプルな画面ならこのやり方でも十分です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      function buttonClick () {
        alert('クリック！');
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="buttonClick();" />
    <input type="button" onclick="alert('これでもOK');" />
  </body>
</html>

addEventListenerを使用

ネット上のサンプルでもよくある、一般的な方法です。

document.getElementByIdなどでhtmlのボタンなどの要素を取得し、イベントを設定します。

注意したいのが、document.getElementByIdでhtmlの要素を取得するタイミングです。

以下のサンプルのように、画面表示が完了した状態でhtmlの要素を取得する必要があります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      // windowのロードイベント（画面読み込み完了イベント）
      window.addEventListener('load', function () {
        document.getElementById('alertButton').addEventListener('click', function () {
          alert('クリック！');
        });
      });

      // ↓はdocument.getElementById('alertButton')がnullとなるためエラーになる
      // document.getElementById('alertButton').addEventListener('click', function () {
      //  alert('クリック！');
      // });
    </script>
  </head>
  <body>
    <input type="button" id="alertButton" />
  </body>
</html>

IE8以下の対応

IE8以下はaddEventListenerが使えません。

代わりにattachEventが用意されているので、こちらを使用します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      if (window.addEventListener) {
        // addEventListenerが対応している場合
        window.addEventListener('load', function () {
          document.getElementById('alertButton').addEventListener('click', function () {
            alert('クリック！');
          });
        });
      } else {
        // addEventListenerが対応していない場合（IE8以下の場合）
        window.attachEvent('onload', function () { // "on"をつけるのを忘れずに！
          document.getElementById('alertButton').attachEvent('onclick', function () {
            alert('クリック！');
          });
        });
      }
    </script>
  </head>
  <body>
    <input type="button" id="alertButton" />
  </body>
</html>
JavaScript

関連記事