Wikibooks

JavaScript/イベント処理

< JavaScript
XMLHttpRequest JavaScript
イベント処理 		DOM
このページ「JavaScript/イベント処理」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。

概要編集

ウェブページにおいては、

  • ページの読み込みが終わり、DOMの準備ができた
  • マウスで画面上の要素をクリックされた
  • 文字列入力フィールドにフォーカスが移った
  • 文字列入力フィールドの文字列を変更された

などの出来事をイベントとしてプログラムが捉えることができます。

プログラムがイベントを捉えて処理を行うには

  • イベントが発生した時に処理を行う関数（＝イベントハンドラ）を用意します。
  • addEventListenerメソッドを使って、イベントターゲットにイベントの種類とイベントハンドラを登録します。

イベントターゲットは window（ウインドウ全体）か要素で、子要素から順にイベントハンドラが探され、最初に見つかったハンドラが実行されます。

この処理をいつ行うかがDOMの準備完了の都合で問題に成るのですが、これ自身も 'DOMContentLoaded' というイベントして管理されます。

コード例 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <script>
      window.addEventListener('DOMContentLoaded', ev => {
          const myButton = document.querySelector("#myButton");
          myButton.addEventListener("click", ev => window.alert("ボタンがクリックされました。"));
      });
    </script>
  </head>
  <body>
    <input id="myButton" type="button" value="Click Me!" />
  </body>
</html>
  1. 'DOMContentLoaded'[1]、匿名関数をハンドラとして登録します。
  2. INPUT要素（ボタン）をElementオブジェクトとして得ます。
  3. ボタンの"click"ハンドラにalertメソッドを呼び出す匿名関数を登録します。

この例では、アロー関数を使いましたが関数定義や関数式を使うことができます。

応用例編集

HTMLの入力ボックスへの入力もイベントとしてJavaScriptで制御できる。

たとえば、登録画面において、テキスト入力ボックスに入力された文字が空白の場合には「登録」ボタンを押せないようにするには、、、

コード例 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <script>
      window.addEventListener('DOMContentLoaded', ev => {
          // document.querySelector は比較的重めな処理なので乱発しない
          const textbox1 = document.querySelector("#textbox1"),
                button1 = document.querySelector("#button1");
          // 初期状態
          textbox1.value = ""; 
          button1.disabled = true;

          // テキスト文字が "" であったら登録ボタンを無効にする
          function funcChange(ev) {
              button1.disabled = textbox1.value == "";
          }
          textbox1.addEventListener('change', funcChange);
          textbox1.addEventListener('keyup', funcChange);
          button1.addEventListener('change', funcChange);
          button1.addEventListener('keyup', funcChange);
      });
    </script>
  </head>
  <body>
    <form action="javascript:void(0)" method="post">
      <fieldset>
        <legend>ユーザー名を登録</legend>
        <input type="text" name="username" id="textbox1">
        <input type="submit" value="登録" id="button1">
      </fieldset>
    </form>
  </body>
</html>
  1. 'DOMContentLoaded'、匿名関数をハンドラとして登録します。
  2. 同じ関数が複数回呼ばれるので、funcChange()として関数定義。
  3. 同じ関数をボタンとテキストの "change" ハンドラと "keyup" ハンドラに登録。
addEventListenerは何のメソッド

イベント処理につきもののaddEventListenerメソッドですが、これはEventTargetオブジェクトのメソッドで[2]、window や document と全ての要素で使うことができます。 EventTargetには他に、

  • EventTarget.prototype.constructor
  • EventTarget.prototype.dispatchEvent
  • EventTarget.prototype.removeEventListener

などのメソッドがあります。


脚注編集

  1. ^ "load"としがちですが、レンダリングの完了を待つ必要はありません。
  2. ^ https://dom.spec.whatwg.org/#interface-eventtarget

関連項目 編集

"https://ja.wikibooks.org/w/index.php?title=JavaScript/イベント処理&oldid=178962" より作成