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

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

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

直接htmlに埋め込む

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

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

<!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.getElementByIdhtmlの要素を取得するタイミングです。

以下のサンプルのように、画面表示が完了した状態で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>

関連記事

  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


  • stylelintで例外(無視)するタグを指定する

    cssで構文チェックを行うstylelintで任意のタグを無視してエラーとしない方法を紹介します。以下のようにruleのignoreTypesで無視するタグを指定します。以下の例ではamp htmlの...


  • JavaScript localStorageの基本的な使い方まとめ

    JavaScriptでデータをブラウザに簡単に保存する仕組みのlocalStorageの基本的な使い方を紹介します。keyは保存するときにキーとなる値です。取り出すときにこのキーを指定して取得します。...


  • JavaScript 文字列を連結する

    JavaScriptで文字列を連結します。JavaScriptでは文字列の連結は文字列同士を+で結合できます。例えば以下のように、数値同士を+演算子で計算すると足し算が行われてしまうので注意します。上...


  • JavaScript 0埋めをするテキストボックスを作成する

    テキストボックスで値を入力後、指定した文字数に0埋めする処理を実装します。以下のURLで紹介した処理を組み合わせれば簡単に実装できます。JavaScriptで指定した文字数に0埋めをするとJavaSc...


  • JavaScript ¥(円マーク)を文字列で扱う

    JavaScriptの¥(円マーク)は、正しく設定していないと利用者のPCのOSなどの環境によっては\(バックスラッシュ)で表示されてしまう可能性があるので、扱いには注意が必要です。JavaS...


  • JavaScript trimで前後の空白(スペース)を削除する

    JavaScriptで文字列の前後の空白(スペース)を削除します。trim関数を使えば先頭と末尾の半角スペース、全角スペースの両方が削除されます。IE8以下の場合はtrim関数が使えないので自作する必...


  • JavaScript 時刻の妥当性チェックをする

    時刻の妥当性チェックを行います。HH:mm書式で00:00〜23:59までの範囲が有効になるように正規表現でチェックをしています。


  • JavaScript システム日付を取得する

    JavaScriptでシステム日付を取得するには以下のように、Dateオブジェクトを宣言します。取得したDateオブジェクトから年〜ミリ秒までをそれぞれ取得できます。月だけは0から始まるので+1をする...


  • JavaScript 文字列を指定した長さに切り取る

    JavaScriptで文字列を指定した長さに切り取ります。よくある方法としてsubstrとsubstringの2つの方法があります。substr(開始位置, 切り取る文字数)で文字列を切り取ります。開...