イベント認識と値の取得

テキストボックスに値を入力した時、ボタンを押した時、ページのロードが完了した時等など。各々のタイミングでJavaScriptを実行したり、入力された値を取得する方法とそのサンプルです。

HTML属性 on～を使ったイベント認識と値取の得

HTMLのon～属性を設定してイベント認識。「on～=”○○”」の○○の部分にJavaScriptの関数名を指定。１つのテキストボックスに複数のイベントを登録しても実行可能でした。

HTMLのon～属性を設定したイベント認識と値取得のサンプル

・項目０１、項目０２、項目０３のテキストボックスの値を変更した時にchk1_Onまたはchk2_Onの関数を呼び出し。
・テキストを選択した時にselect_Onの関数を呼び出し。
・ボタンを押した時も関数を呼び出しし、それぞれのテキストボックスの値をアラートで表示

<p>テキストボックスにメッセージを入力してください</p>
<p>項目０１:<input type="text" value="初期値０１"  id = "txt01" onselect = "txtSelect_On('txt01','項目０１')" onchange ="chk1_On('txt01','項目０１')"><br />
項目０２:<input type="text" value="初期値０２"  id = "txt02" onselect = "txtSelect_On('txt02','項目０２')" onchange ="chk2_On('txt02','項目０２')"><br />
項目０３:<input type="text" value="初期値０３"  id = "txt03" onselect = "txtSelect_On('txt03','項目０３')" onchange ="chk1_On('txt03','項目０３')"><br />
<input type="button" value="入力したテキストを取得" id ="btn01" onclick  ="getResult_On()">
</p>

// ボタンのonclickイベントで呼び出し。それぞれの項目の値を取得
function getResult_On() {
    var result = "項目０１は「" + document.getElementById("txt01").value + "」\n";
    result += "項目０２は「" + document.getElementById("txt02").value + "」\n" ;
    result += "項目０３は「" + document.getElementById("txt03").value + "」" ;
    alert(result);
}
// テキストボックスのonchangeイベントで呼び出し。入力チェックなどで利用できる。
function chk1_On(inputId,inputNm) {
    var elm = document.getElementById(inputId);
    console.log("chk1を実行！" + inputNm + "を変更しました。値は「" + elm.value + "」");
}
function chk2_On(inputId,inputNm) {
    var elm = document.getElementById(inputId);
    console.log("chk2を実行！" + inputNm + "を変更しました。値は「" + elm.value + "」");
}
// テキストボックスのonselectイベントで呼び出し。
function select_On(inputId,inputNm){
    console.log(inputNm + "のテキストが選択されました");
}

チェックパターンをいくつかの関数にしておくことで項目に応じた入力チェックが出来る。更にチェック時に引数でIDと項目名を渡すと「項目○○は△△です」などのアラートを出す事も可能^^　値の取得はidを指定して取得。

on○○の種類

on○○の種類をざっとしらべてみた。もちろんHTMLの要素に応じて使えるものと使えないものがある。UIのほとんどのものはカバーできそう

onbeforeunload,
onblur(フォーカスを失った時),
onchange,
onclick,
ondblclick,
onfocus,
onkeydown,
onkeypress,
onkeyup,
onload,
onmousedown,
onmousemove,
onmouseout,
onmouseover,
onmouseup,
onreset,
onselect,
onsubmit,
onunload　等など

JavaScriptのイベントリスナーを使ったイベント認識と値の取得

HTMLのon～属性以外にも、JavaScriptのイベントリスナーを使った取得方法がある。上記のサンプルと同じような処理をイベントリスナーで書き換えてみた。

JavaScriptのイベントリスナーを使ったイベント認識と値の取得のサンプル

<p>テキストボックスにメッセージを入力してください</p><p>項目１１:<input type="text" value="初期値１１" id = "txt11" ><br />
項目１２:<input type="text" value="初期値１２" id = "txt12" ><br />
項目１３:<input type="text" value="初期値１３" id = "txt13" ><br />
<input type="button" value="入力したテキストを取得" id ="btn11">
</p>

// 入力オブジェクトの定義
var txt11 = document.getElementById("txt11");
var txt12 = document.getElementById("txt12");
var txt13 = document.getElementById("txt13");
var btn11 = document.getElementById('btn11');

// イベントリスナーの登録
btn11.addEventListener('click', getResult_Lsn, false);  // ボタンクリック時
txt11.addEventListener('change', function(){chk1_Lsn('txt11','項目１１'); }, false);    // 値の変更
txt12.addEventListener('change', function(){chk2_Lsn('txt12','項目１２'); }, false);    // 値の変更
txt13.addEventListener('change', function(){chk1_Lsn('txt13','項目１３'); }, false);    // 値の変更
txt11.addEventListener('select', function(){select_Lsn('txt11','項目１１'); }, false);  // 値の選択
txt12.addEventListener('select', function(){select_Lsn('txt12','項目１２'); }, false);  // 値の選択
txt13.addEventListener('select', function(){select_Lsn('txt13','項目１３'); }, false);  // 値の選択
    
// ボタンクリック時のイベントで呼び出し。それぞれの項目の値を取得
function getResult_Lsn() {
    var result = "項目１１は「" + document.getElementById("txt11").value + "」\n";
    result += "項目１２は「" + document.getElementById("txt12").value + "」\n" ;
    result += "項目１３は「" + document.getElementById("txt13").value + "」" ;
    alert(result);
}

// リスナーのchangeイベントので呼び出し。入力チェックなどで利用できる。
function chk1_Lsn(inputId,inputNm) {
var elm = document.getElementById(inputId);
console.log("chk1_Lsnを実行！" + inputNm + "を変更しました。値は「" + elm.value + "」");
}
function chk2_Lsn(inputId,inputNm) {
var elm = document.getElementById(inputId);
console.log("chk2_Lsnを実行！" + inputNm + "を変更しました。値は「" + elm.value + "」");
}

// リスナーのselectイベントで呼び出し。
function select_Lsn(inputId,inputNm){
console.log(inputNm + "のテキストが選択されました");
}

addEventListenerの第2引数を無名関数としたが関数名を直接記述する事もできる。ただし引数をセットして関数を呼び出しするとエラーになってしまう。

HTMLのon～を使ってもJavaScriptのイベントリスナーを使っても一通りの事はできそう。txt11.addEventListener('change', chk1_Lsn('txt11','項目１１'), false);  // こんな書き方をするとエラー

イベントリスナーの種類

HTMLのon～とほぼ同じで、名称も先頭の「on」を取り除いただけのものが多い beforeunload
blur(フォーカスを失った時),
change,
click,
keydown,
keypress,
keyup,
load,
mousedown,
mousemove,
mouseout,
mouseover,
mouseup,
reset,
select,
submit,
unload
HTML属性のondblclickに相当するイベントリスナーが存在しないらしい。イベントリスナーでダブルクリックイベントを認識するにはclickイベントが指定時間内に２回発生したという判定を行うしかないみたいようす^^;

HTMLのon～を使ってもJavaScriptのイベントリスナーを使っても一通りの事はできそう。