苦学楽学塾 ホームページ
最終更新日：2025年1月4日
プログラムは原則、上から下に向って実行されていくのですが、途中でキー入力待ち、マウス・クリック待ちの状況になった時、キー入力やマウス・クリックがあるかどうかを調べる状態のまま繰り返し動作になってしまうと、コンピュータは忙しく働いているのに、そこでコンピュータの動作を止めてしまうのと一緒です。やることだけやって別の処理に移る方がより多くの仕事ができて、コンピュータとしては効率がよいのです。そこで、キー入力とか、マウス・クリックとか、何か起きたときにだけ対応する処理を行い、終わったらコンピュータを待ち状態にする、という考え方でプログラムを構成しようということになります。この考え方をイベント・ドリブンと言います。
キー入力、マウス・クリックといった処理開始のきっかけとなるできごとをイベントと言います。イベント発生により起動されるプログラムをイベントハンドラと言います。JavaScriptでは数多くのイベントに対応できるようになっていますが、そのうち、テキストボックス入力完了のchangeイベント、マウス移動のmousemoveイベントに対応するプログラムを具体的な例を使って考えてみます。JavaScriptのイベント処理の方法は3通りあります。
以下の例では、「お名前をお聞かせください」と表示し、テキストボックスを表示して一旦作業を終了し、ユーザーがそこに名前を入力し[ENTER]キーを押すと、changeイベントが発生、イベントハンドラanswer2()が起動し、入力された名前を表示して、「ようこそ！・・・さん、よろしくお願いいたします。得意科目を教えてください。」と表示し、テキストボックスを表示して作業を終了します。
ユーザーがそこに得意科目を入力し[ENTER]を押すと、changeイベントでイベントハンドラanswer3()が起動し、入力した科目名を表示するとともに、枠を表示し、枠に対してマウスを枠内で移動させるとmousemoveイベントを発生させてイベントハンドラfunc4()で枠内の色を変え、枠外に出るとmouseoutイベントを発生させてイベントハンドラfunc5()で処理を終了するようになっています。
テキストボックスは、HTMLの<input>タグで実現します。<input>タグに「お名前をお聞かせください」という入力を促す言葉を付けるのには、<input>タグを<label>～</label>タグで囲み、<input>タグの前に言葉を入れます。<input>タグの属性typeの指定には、type="text"，属性sizeの指定には、size="40"(入力枠の大きさは40文字分)とし、<input>タグをJavaScriptで操作できるようにクラス(オブジェクト指向の「クラス」ではなく、CSSのクラスです)名class="ip2"を付けます。
さて、イベント処理の第1の方法は、HTML記述の<input>タグのonchange属性(属性名としては、イベント名の前に"on"が付きます)、以下の例では、class="ip2"とした<input>タグのonchange属性に、イベントハンドラanswer2()を登録します(HTMLにイベントハンドラを伝えるので関数名の後ろに"()"が必要です)。こうしてchangeイベント発生により、answer2()が起動します。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScriptのテスト</title>
<style type="text/css">
p{color:black;font-size:medium}
input{font-size:large}
</style>
</head>
<body style="background-color:white">
<p>JavaScriptのテストをします。</p>
<div><label>お名前をお聞かせください。<input type="text" class="ip2" size = "40" onchange="answer2()"></label></div>
<div><p class="p2"></p></div>
<script>
// イベントのテスト
const iq2 = document.querySelector(".ip2");
const q2 = document.querySelector(".p2");
var iq3;
var d1;// 後で、divタグをJavaScriptプログラムで発生させるときに使います。
iq2.focus();
･･････
// input要素"ip2"のタグ内で、changeイベントにanswer2()メソッドを登録する場合
function answer2() {
var name1 = iq2.value;
q2.innerHTML = "ようこそ！<br>" + name1 + "さん。よろしくお願いいたします。";
var label1 = document.createElement('label');
iq3 = document.createElement('input');
iq3.type = "text";
iq3.size = 30;
var tx1 = document.createTextNode("得意科目を教えてください。");
label1.appendChild(tx1);
document.body.appendChild(label1);
label1.appendChild(iq3);
iq3.focus();
iq3.onchange = answer3;
}
上記のイベントハンドラanswer2()の処理の中で、テキストボックスの入力内容を取得する必要がありますが、そのために、HTMLのDOMツリーからclass="ip2"と名前を付けたタグを、DOMを持っているdocumentオブジェクトのquerySelectorメソッドを使って、const iq2=document.querySelector(".ip2")として探します。このメソッドでは、クラス名"ip2"の前にピリオド'.'を付ける必要があります(つけないとクラス名ではなくタグ名と見なされます。id名の場合には'#'が付きます)。JavaScriptの中では、iq2が<input>タグを示します。iq2.focus()とすると、マウスで選択しなくても、テキストボックスiq2が入力待ちになります。
テキストボックスに入力された内容は、iq2の属性valueの中に入っているので、var name1=iq2.valueとして変数name1に取り出します。name1を他の文字列と連結させてメッセージを表示させるのに、<p>～</p>の中に記述して表示させるのですが、このために、class="p2"とクラス名が付けられている<p>タグを、const q2=document.querySelector(".p2")として探します。<p>タグの表示文字列は、q2のinnerHTMLプロパティに、q2.innerHTML= "ようこそ！<br>" + name1 + "さん。よろしくお願いいたします。"として設定します。改行をHTMLに伝えるためには、'\n'ではなくHTMLの改行タグ"<br>"を入れることに注意してください。
2番目の<label>タグ、<input>タグの表示は、changeイベントハンドラanswer2()の中でJavaScriptの機能を使って作ります。HTML内に記述し、最初から表示させると、おかしなことが起こります。JavaScriptでタグを作るのには、documentオブジェクトのcreateElementメソッドを使います。<label>タグを作るのであれば、var label1 = document.createElement('label')とします。JavaScriptの中では、<label>タグはlabel1として操作します。<label>～</label>に入れる<input>タグを作るために、var iq3 = document.createElement('input');とします。JavaScriptの中では、<input>タグはiq3として操作します。iq3.type ="text"として、iq3のtype属性を"text"にします。iq3.size = "30"としてsize属性を設定します。テキストボックスに表示する文字列をvar tx1 = document.createTextNode("得意科目を教えてください。")として作ります。appendChildメソッドにより、label1.appendChild(tx1)としてこのtx1をlabelの子要素とします。また、document.body.appendChild(label1)として、label1をbodyの子要素とします。さらに、label1.appendChild(iq3)として、iq3をlabel1の子要素とします。こうして、label1，txt1，iq3がDOMツリーに接続され画面に表示されます。
iq3.focus()とすると、テキストボックスiq3が入力待ちになり、iq3.onchange = answer3;として、<input>タグiq3のonchange属性(iq3のonchangeプロパティ)にchangeイベントのイベントハンドラanswer3()を登録します。ここは、iq3のプロパティに設定するので単に関数名のanswerを書くのみで"()"をつけないことに注意してください。もし"()"を付けてしまうと、関数answer3()の戻り値をiq3.onchangeに代入する、という意味になってしまいます。
さて、ここにイベント処理の第2の方法が出てきました。第2の方法は、JavaScriptの記述の中で、iq3のonchangeプロパティとしてanswer3を登録します。テキストボックスiq3の入力完了イベントchangeの発生により、answer3()が起動します。answer3()は以下のようになっています。
// input要素"ip2"のイベント・プロパティにanswer3()メソッドを設定する場合
function answer3() {
var sub1 = iq3.value;
var q3 = document.createElement('p');
q3.innerHTML = sub1 + "が得意なんて、素敵です。頑張りましょう！";
document.body.appendChild(q3);
d1 = document.createElement('div');
d1.style.width = "510px";
d1.style.height = "510px";
d1.style.border = "solid 1px black";
document.body.appendChild(d1);
d1.focus();
d1.addEventListener("mousemove", func4, false);
d1.addEventListener("mouseout", func5, false);
}
イベントハンドラanswer3()の処理の中で、まず、<input>タグiq3に入力された内容をsub1 = iq3.valueとしてsub1に読み取ります。sub1に"が得意なんて、素敵です。頑張りましょう！"を連結させて表示するための<p>タグを、var q3 = document.createElement('p')として作り、表示させる文字列をq3のinnerHTMLプロパティに代入し、document.body.appendChild(q3)として、q3をbodyの子要素として登録すると<p>タグが画面に表示されます。
枠の表示は、HTMLの<div>タグで実現します。上記のanswer3()の例では、<input>タグiq3に入力後に表示させるために(最初からHTMLで表示すると、表示が崩れます)、イベントハンドラanswer3()の処理の中でd1 = document.createElement('div')として<div>タグを作ります(d1はanswer3()の中だけでなくfunc4()の中でも使うので、グローバル・スコープとするために、JavaScriptプログラムの最初で宣言しています)。枠のサイズ、枠形状を、d1のスタイル属性d1.styleを使ってd1.style.width = "510px"; d1.style.height = "510px"; d1.style.border = "solid 1px black";という具合に指定します。これは、HTML記述として、<div style="width:510px;height:510px;border:solid 1px black">とするのと同じです。さらに、d1を、document.body.appendChild(d1)として、bodyの子要素として登録すると枠が表示され、さらにd1.focus()として、d1にフォーカスを持ってきます。
イベント処理の第3の方法は、addEventListenerメソッドを用いて、d1にイベントハンドラを登録します。d1.addEventListener("mousemove", func4, false)とすると、枠d1の中でマウスを動かしてmousemoveイベントを発生させると、イベントハンドラfunc4()が起動します。ここも関数名のみで()は付けません。また、d1.addEventListener("mouseout", func5, false)として、枠外にマウスが出ると、イベントハンドラfunc5()が起動するようになっています。イベントハンドラfunc4()とfunc5()は以下のようになっています。
// 生成されたdiv要素にaddEventListnerメソッドでfunc4()を設定する場合
function func4() {
var str1 = "rgb(" + String(event.clientX/2) + "," + String(event.clientY/2) + ",127)";
d1.style.backgroundColor = str1;
}
function func5() {
d1.removeEventListener("mousemove", func4);
d1.removeEventListener("mouseout", func5);
iq2.disabled = true;
iq3.disabled = true;
return false;
}
この後ろに、スクリプトの終了</script>，<body>タグの終了</body>，<html>タグの終了</html>を付けます。
</script>
</body>
</html>
1つ注意点があります。第1の方法、タグのonchange属性でイベントハンドラを設定する方法、第2の方法、要素のonchangeプロパティにイベントハンドラを設定する方法では、後にこのプロパティに別のイベントハンドラを上書きすると、イベントハンドラが入れ替わって、元々のイベントハンドラが起動しなくります。addEventListenerメソッドを用いる第3の方法では、設定されたイベントハンドラはすべて起動します。
イベントハンドラfunc4()では、マウスの座標から色コードを設定しています。イベントハンドラfunc5()では、イベントハンドラを設定したままでは、いつまで経ってもイベントの処理をし続けるので、removeEventListenerメソッドにより、イベントハンドラが起動しないように、d1に登録されたイベントハンドラを除去しています。また、<input>タグiq2とiq3を入力不可にするために、iq2とiq3のdisabledプロパティをtrueにしています。
以上のイベント処理のテストを行うHTMLファイルはこちら。
JavaScriptが扱うイベントは多岐にわたって書ききれないほどあるので、そのうちの代表的なものを以下に紹介しておきます。
・load JavaScriptは、プログラムを置く位置によって異なる動作をすることがあります。ヘッダ内で、querySelectorメソッドを動かそうとすると、まだ、HTMLが読み込まれておらず、タグや要素が存在しないのでエラーになってしまう、ということが起こります。そこで、巨大なページや画像を大量に扱うページなどで、window.onload = funcとして、windowのonloadプロパティにJavaScriptの関数func()を設定する、という形で、HTMLファイルが完全にロードされてDOMツリーが構成された後にfunc()を起動し、window内のオブジェクトを操作する、という手法が取られることがあります。loadイベントのハンドラを特定のタグに設定することもできます。
・click ウェブページ上のどこかでマウスの左ボタンでクリックした時に発生するイベントです。ボタン上でクリックすると何らかの動作をさせるという場合に、ボタンのonclickプロパティにハンドラ関数を設定する、というようにして使います。すべてのマウスイベントで、特殊キーがどのような状態にあるかをeventオブジェクトを使って調べることができます。event.shiftKeyでシフトキー、event.altKeyでAltキー、event.ctrlKeyでCtrlキーの状態をチェックできます。キーが押されている時にtrueです。
・mousedown マウスボタンが要素上で押し込まれた時に発生するイベントです。このイベントはマウスの左ボタンでも右ボタンでも発生するので、どちらのボタンかをevent.buttonで調べ、0なら左ボタン、2なら右ボタンと判断します。mouseupイベントも同様です。
・mouseup マウスボタンが要素上で放された時に発生するイベントです。
・mousemove マウスが要素上で移動した時に発生するするイベントです。マウスの位置を知りたい場合には、要素左上からの座標event.clientX，event.clientY，画面上での座標event.screenX，event.screenYを調べます。
・mouseenter マウスが要素上に侵入した時に発生するイベントです。
・mouseover マウスが要素上また子要素上に侵入した時に発生するイベントです。
・mouseout マウスが要素上また子要素から出て行った時に発生するイベントです。
・keydown キーが押し込まれた時に発生するイベントです。どのキーか知るには、event.keyを調べます。押されたキーの文字が入っています。event.shiftKeyでシフトキー、event.altKeyでAltキー、event.ctrlKeyでCtrlキーの状態をチェックできます。キーが押されている時にtrueです。keyupイベントでも同様です。
・keyup キーが離された時に発生するイベントです。
・change テキストボックスで[Enter]キーを押す、あるいは、ボタンのどれか選択すると発生します。inputタグ、selectタグのvalueプロパティを参照することにより入力された情報を取得します。
・scroll ウェブページ、あるいは、構成要素をスクロールさせると発生します。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。