JavaScript/イベント処理

出典: フリー教科書『ウィキブックス(Wikibooks)』
ナビゲーションに移動 検索に移動
strictモード JavaScript
イベント処理
オブジェクト
このページ「JavaScript/イベント処理」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。

概要[編集]

Webページにおいて、ユーザーの

  • マウスで画面上のボタンを押す
  • 画面をスクロールする

等のアクションをユーザーしたの操作を JavaScript からイベントとして処理できる。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
  <script>
    function buttonClick(){
      window.alert("ボタンがクリックされました。")
    };
  </script>
</head>
<body>
<input type="button" onclick="buttonClick()" >
</body>
</html>

応用例[編集]

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

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

ユーザー登録を例にしよう。

コード例

<form action="catchTest.php" method="post" onload="funcChange()" >
ユーザー名を登録: <input type="text" name="username" id="textbox1" onchange="funcChange()" onkeyup="funcChange()"  >
<input type="submit" value="登録" id="button1"  onchange="funcChange()" onkeyup="funcChange()" >
</form>

<script>
    // 最初は登録ボタンを無効にする。
    if ( document.getElementById("textbox1").value == "" ) {
        document.getElementById("button1").disabled = true;
    }

    // テキスト入力のたびに判定。テキスト文字が何かあれば、登録ボタンを無効にする処理。
    function funcChange(){
        document.getElementById("button1").disabled = (document.getElementById("textbox1").value == "" );
    }
</script>

解説 まず、HTML側の onchange 属性 (onChange) で、何か変更があったごとに起動する関数を指定できる。ただし、このonchange属性は、テキスト入力ボックスの入力の場合には、入力後にそのテキストボックスからマウスカーソルが外れてからでないと反応しないので、これだけではあまり実用的ではない。

なので、さらに onkeyup プロパティ (onKeyUP)という、何かキーボードのボタンが押されて持ち上げられた場合に起動するイベント処理に関する属性を使う。

書式は

onkeyup="キーアップ時に起動したい関数名()"

である。(onchangeも同様)

JavaScript で関数を定義する場合は、予約語「function」を忘れないようにしよう。

よくあるミスで、初心者は、C言語などJavaScript以外の他言語の癖で、予約後「function」を忘れることがある。

さて、

onload="funcChange()" 

というのは、JavaScriptで操作出来るようになってから関数を呼び出す仕組みで、onloadプロパティのある要素(上記コード例ではform)への操作が可能になり次第 funcChange() が実行される。

document.getElementById("button1") は、HTML文書の中から "button1" を id とする要素を探し Element オブジェクトとして返す。 Element オブジェクトは JavaScript で操作するためのオブジェクトで、この場合は Element オブジェクト の disabled プロパティを true を代入すると要素は無効になり、falsee を代入すると要素は有効になります。

form要素はHTMLの要素の一種。form要素の詳細についてはHTML/フォームを参照。

関連項目 [編集]

HTML ラベル:HTMLとの連携でラベルのイベント

HTML/フォーム:HTMLとの連携でボタンのイベント