[2021/06/21] JavaScript jQuery w2ui.form を使ったフォーム処理の方法その2(actions) (No.275)
[2021/06/18] JavaScript jQuery w2ui.form を使ったフォーム処理方法の紹介 (No.274)
[2021/06/15] JavaScript jQuery イベント関数に引数を渡す方法 (No.273)
[2021/06/07] JavaScript IndexedDB の使い方6(データ削除) (No.272)
-
今回は ウインドウ のどこをクリックしてもイベントを発生させる方法について説明します。
WEBページで表示している ウインドウ どこでもとは body タグの中身の全てのことになります。
そこで body タグのクリックイベントに関数を定義すればいいことになります。 以下の様な宣言をページが全てロードされたタイミングで行うことになります。document.body.onclick = function ( event ) { ... }
これを使った例として以下に HTML ファイル側のソースを示します。
■bodyタグのクリックイベントに関数を定義
<html> <head> <meta charset="utf-8"> <title>test Event body click - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function () { //ウインドウ内クリックでの処理 document.body.onclick = function ( event ) { alert("document.body.onclick...event"); } }); </script> </head> <body> <h2>test Event body click - 1</h2> <p>ウインドウのどこをクリックしてもイベント発生</p> </body> </html>
これを実行しますと確かにクリックするとアラートが表示されるのですが、場所が限定されています。
h2 タグ及び p タグの上あたりでクリックする場合のみクリックイベントが発生する様です。
FireFox の開発環境の「インスペクター」タブで見てみると body の領域は縦方向に狭い領域となっています。これは当然の結果であり body の縦方向の領域の指定が無いので p タグの領域までとなっています。
これを改善するには body の縦方向の領域の指定を行います。
■bodyタグの縦方向の領域を定義
<html> <head> <meta charset="utf-8"> <title>test Event body click - 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function () { //ウインドウ内クリックでの処理 document.body.onclick = function ( event ) { alert("document.body.onclick...event"); } }); </script> <style> /*クラスのスタイル宣言*/ .whole{ width: 100%; height: 100%; } </style> </head> <body class="whole"> <h2>test Event body click - 2</h2> <p>ウインドウのどこをクリックしてもイベント発生</p> </body> </html>
body の縦方向の領域の指定をスタイルによりウインドウの100%と指定しましたので、 ウインドウのほぼすべてでクリックイベントが発生します。
■buttonタグのクリックイベントとダブった場合について
p タグの下に button タグを置いて、そのクリックイベントと body のクリックイベントのタイミングに付いて確認します。
3個のボタンの1個をクリックすると、ボタンクリックイベントが発生した後で body のクリックイベントが発生します。
2個のイベントが連続して発生しますので、注意が必要です。<html> <head> <meta charset="utf-8"> <title>test Event body click - 3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function () { //ウインドウ内クリックでの処理 document.body.onclick = function ( event ) { alert("document.body.onclick...event"); } //ボタンクリック処理 $('.cbutton').on('click', function( event ) { alert(event.currentTarget.innerText + "onclick...event"); }); }); </script> <style> /*クラスのスタイル宣言*/ .whole{ width: 100%; height: 100%; } </style> </head> <body class="whole"> <h2>test Event body click - 3</h2> <p>ウインドウのどこをクリックしてもイベント発生</p> <button class="cbutton">ボタン1</button> <button class="cbutton">ボタン2</button> <button class="cbutton">ボタン3</button> </body> </html>
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript 関数の宣言について(function)
⇒JavaScript jQueryでJavascriptファイルの動的に変更する方法
PR -
前回は簡単な例を示してフォームコンポーネントである w2ui.form ついて説明をしました。
今回はフォームオブジェクトの actions プロパティについて説明をしていきます。
actions は各ボタン毎のプロパティ名と関数宣言をオブジェクト配列として宣言を行います。
[ボタン名プロパティ]は HTML の中の button タグの name 属性との一致が必要です。//[actions]プロパティの宣言のみ抜粋 actions: { [ボタン名プロパティ1]: function () { [関数宣言1]; }, [ボタン名プロパティ2]: function () { [関数宣言2]; }, [ボタン名プロパティ3]: function () { [関数宣言3]; }, ... }
前回の記事から例を以下に示します。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script> </head> <body> <div id="testForm" style="width: 500px"> <div class="w2ui-page page-0"> <div class="w2ui-field"> <label>名前:</label> <div> <input name="name" maxlength="100" size="40"/> </div> </div> <div class="w2ui-field"> <label>住所:</label> <div> <input name="address" maxlength="100" size="40"/> </div> </div> <div class="w2ui-field"> <label>備考:</label> <div> <textarea name="comment" style="width: 300px; height: 50px;"></textarea> </div> </div> </div> <div class="w2ui-buttons"> <input type="button" value="リセット" name="reset"/> <input type="button" value="保存" name="save"/> </div> </div> </body> <script> $(function () { $('#testForm').w2form({ name : 'testForm', header : 'Test Form', fields : [ { field: 'name' , type: 'text', required: true }, { field: 'address', type: 'text', required: true }, { field: 'comment', type: 'text'} ], actions: { reset: function () { this.clear(); }, save: function () { this.save(); } } }); }); </script> </html>
「リセット」ボタンの処理はフォームオブジェクトの actions プロパティの中の reset プロパティで宣言された関数がコールされます。 また、「保存」ボタンの処理は actions プロパティの中の save プロパティで宣言された関数がコールされます。
reset プロパティの関数でフォームオブジェクトの clear メソッドをコールしています。//[clear]メソッドのコール方法 clear( [ field1, field2, ... ] ) ・field1, field2, ... :クリアされるフィールドを指定 ・引数が無い場合 :全てのフィールドがクリアされる 更に record オブジェクトがクリアされ、 recid が「0」クリア
save プロパティの関数でフォームオブジェクトの save メソッドをコールしています。
//[save]メソッドのコール方法 save( [ postData ] , [ callBack ] ) ・postData :全フィールドのデータの他に追加されるデータ宣言 ・callBack :「save」処理されたプログラムから戻った時にコールされる関数宣言 (通常は PHP でのプログラムを想定していますが、 callBack 関数の引数に PHP からの戻り値が返される様にします)
上記の HTML ファイルをロードしデータ入力後「保存」ボタンをクリックすると何も起こりませんが、「ウエブ開発ツール」の「コンソール」を見ると以下の様に表示されます。「ERROR: Form cannot be saved because no url is defined.」のメッセージで save 用の url が宣言されていないエラーが表示されます。
そのため url を宣言してやらないといけないのですが、以下の様に行います。//フォームオブジェクトの[url]プロパティの宣言方法 url : { save : save用のPHPプログラムのurl, get : get用のPHPプログラムのurl, delete : delete用のPHPプログラムのurl, }, ・「save」「get」「delete」はそれぞれ処理用のプロパティで、処理される「url」を宣言
そこで「save」を宣言する様にしたソースを示します。<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script> </head> <body> <div id="testForm" style="width: 500px"> <div class="w2ui-page page-0"> <div class="w2ui-field"> <label>名前:</label> <div> <input name="name" maxlength="100" size="40"/> </div> </div> <div class="w2ui-field"> <label>住所:</label> <div> <input name="address" maxlength="100" size="40"/> </div> </div> <div class="w2ui-field"> <label>備考:</label> <div> <textarea name="comment" style="width: 300px; height: 50px;"></textarea> </div> </div> </div> <div class="w2ui-buttons"> <input type="button" value="リセット" name="reset"/> <input type="button" value="保存" name="save"/> </div> </div> </body> <script> $(function () { $('#testForm').w2form({ name : 'testForm', header : 'Test Form', fields : [ { field: 'name' , type: 'text', required: true }, { field: 'address', type: 'text', required: true }, { field: 'comment', type: 'text'} ], url : { save : 'form-act-2.php', }, actions: { reset: function () { this.clear(); }, save: function () { this.save(); } } }); }); </script> </html>
なお「save」に宣言された PHP プログラムはテストとして、文字列をテキストファイルに書き出すだけの処理です。 (動作したかを確認するだけですので、簡単なものにしました。)
<?php // 固定の文字列を「form-act-2.txt」ファイルに登録 file_put_contents("form-act-2.txt", "0123456789\n"); exit(); ?>
上記の HTML ファイルをロードし各データを入力後「保存」ボタンをクリックし「ウエブ開発ツール」の「コンソール」を見ると以下の様に表示されます。 (PHP のプログラムで「form-act-2.txt」ファイルは作成されました。)「コンソール」には以下のエラーが表示されます。
ERROR: server communication failed. The server should return Object { status: "success" } OR Object { status: "error", message: "error message" , instead the AJAX request produced this: Object { status: "parsererror", error: SyntaxError, rawResponseText: "" }
w2ui.form では AJAX でこの「save」の url を処理していて、 処理結果として「status」と「message」を返す必要がある様です。
それでは、先ほどの PHP プログラムをエラーを返すだけのものに変更してみます。<?php header('Content-type: application/json'); print json_encode(array("status"=>"error", "message"=>"エラー発生!!")); ?>
再度、「保存」ボタンをクリックすると以下の様な表示になります。
なお「エラー発生!!」のメッセージは自動で表示されます。
再度、先ほどの PHP プログラムを成功を返すだけのものに変更してみます。<?php header('Content-type: application/json'); print json_encode(array("status"=>"success")); ?>
再度、「保存」ボタンをクリックするとチラッとメッセージが表示される様ですがそのままなにも起こりません。 このままでは、成功したのかがはっきりしませんので、その対応を行います。
フォームオブジェクトの actions プロパティの中の save プロパティで宣言された関数の中の save メソッドを以下の様に変更します。
■save プロパティで宣言された関数の中の save メソッドを宣言
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script> </head> <body> <div id="testForm" style="width: 500px"> <div class="w2ui-page page-0"> <div class="w2ui-field"> <label>名前:</label> <div> <input name="name" maxlength="100" size="40"/> </div> </div> <div class="w2ui-field"> <label>住所:</label> <div> <input name="address" maxlength="100" size="40"/> </div> </div> <div class="w2ui-field"> <label>備考:</label> <div> <textarea name="comment" style="width: 300px; height: 50px;"></textarea> </div> </div> </div> <div class="w2ui-buttons"> <input type="button" value="リセット" name="reset"/> <input type="button" value="保存" name="save"/> </div> </div> </body> <script> $(function () { $('#testForm').w2form({ name : 'testForm', header : 'Test Form', fields : [ { field: 'name' , type: 'text', required: true }, { field: 'address', type: 'text', required: true }, { field: 'comment', type: 'text'} ], url : { save : 'form-act-2.php', }, actions: { reset: function () { this.clear(); }, save: function () { this.save({}, function (data) { if (data.status === "success") { alert("OK !!"); return; } else if (data.status === "error") { console.log("ERROR: "+ data.message); return; } }); } } }); }); </script> </html>
これを実行させると以下の様な表示になります。 フォームの中央に薄く「Saving...」の表示が在ることがわかります。(”現在処理中”的な表示でしょうか)
以上、データ登録の簡単な処理方法を示しましたが、実際の場合にはデータ登録の処理が必要になりますが、今回はここまでとします。
昨日に続いてデータの処理に付いて追記します。
■save メソッドで渡されるデータについて
上記の HTML ファイルで「保存」ボタンをクリックした時に save メソッドで渡されるデータは HTTP の POST データとして以下の様な感じで渡されます。{ cmd : 'save', //コマンドとしての「save」 name : フォーム名, recid : レコードID, //設定しなければ「0」 record : { //レコードデータ field1 : value1, //フィールド1データ ... fieldN : valueN //フィールドNデータ } }
それでは、先ほどの PHP プログラムにHTTPリクエスト変数を調べる様に変更してみます。
<?php // HTTP リクエスト変数 $strREQ = print_r($_REQUEST, true); file_put_contents("form-act-2.txt", $strREQ); // 成功を返す header('Content-type: application/json'); print json_encode(array("status"=>"success", "message"=>"OK!!")); ?>
結果「form-act-2.txt」は以下の様に JSON データの形式の内容になります。([request] => は1行で出力されていたのですが、見やすく改行しました)
Array ( [request] => { "cmd":"save", "recid":0, "name":"testForm", "record":{ "name":"田中太郎", "address":"東京都△△区", "comment":"あああああああああああああああ" } } )
データ登録処理としてはデータベースのテーブル等に登録することになると思いますが $_REQUEST["request"] の JSON データを連想配列に変換して扱うことになります。
テスト PHP プログラムとしては以下の様な感じになると思います。
<?php // JSON データ変換 $arrREQ = json_decode($_REQUEST["request"], true); // レコードデータ配列のみ $arrRec = $arrREQ["record"]; $strRec = "name :" . $arrRec["name"] . "\n"; $strRec.= "address:" . $arrRec["address"] . "\n"; $strRec.= "comment:" . $arrRec["comment"] . "\n"; file_put_contents("form-act-2.txt", $strRec); // 成功を返す header('Content-type: application/json'); print json_encode(array("status"=>"success", "message"=>"OK!!")); ?>
関連する記事
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み(url)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録(save)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録2(changesデータにレコードを反映し save)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの書式設定(render)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定(editable)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定2(editable, selectType, onCopy, onPaste)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定3(editable, onKeyDown, onCopy, onPaste)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・カラム名のグループ化(タイトルの2行表示)
-
すでにデータグリッドコンポーネントである w2ui.grid については説明しましたが、 今回から複数回に渡りフォームコンポーネントである w2ui.form ついて説明をしていきます。
w2ui.form で入力フォームを作る場合、フォームの属性を各種のプロパティで設定することで表現できます。
先ずは簡単な例を以下に示します。<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script> </head> <body> <div id="testForm" style="width: 500px"></div> </body> <script> $(function () { $('#testForm').w2form({ name : 'testForm', header : 'Test Form', fields : [ { field: 'name' , type: 'text', required: true }, { field: 'address', type: 'text', required: true }, { field: 'comment', type: 'text'} ], actions: { reset: function () { this.clear(); }, save: function () { this.save(); } } }); }); </script> </html>
フォームの領域を div タグで宣言し、その領域に対して w2ui の1つの機能である w2form を設定してやります。 w2form への引数は1個のオブジェクトとして宣言したものを渡してやります。そのオブジェクトの中に、フォーム用の各種のプロパティを宣言します。
上記の例ではフォームの名称である name プロパティ、フォームのタイトルである header プロパティ、 入力データの中身である fields プロパティ、さらに処理動作を actions プロパティを宣言します。
さらに fields は各入力フィールドの属性を専用のプロパティで宣言した配列で宣言し actions は行いたい処理をプロパティとして宣言します。 (fields 用のプロパティは下の方で説明します。)
これを実行させると以下の様な表示になります。
■fields プロパティのオブジェクト配列の内部プロパティについて
プロパティ名 説明 備考 field 入力フィールド指定 この値を入力フィールドの name タグと一致させる type データタイプ タイプには以下のものがあります(他にもあります) - check:チェックボックス
- combo:コンボボックス
- date:日付
- pass :パスワード
- radio:ラジオボタン
- text :テキスト
- textarea:テキストエリア
required 必須指定 true:必須指定、false:必須ではない hidden hidden属性 true:hidden指定(デフォルト:false) disabled disabled属性 true:disabled指定、false:enabled指定(デフォルト) html HTML文字列の生成 各種プロパティがありますがここでは説明を割愛
上記の例では自動で入力フィールドなどを生成できることが分かりましたが、 自分で定義したHTMLに対してフォームオブジェクトを関連付けたい場合があります。 通常はフォームのデザイン等を入れたりしたいので、こちらが普通だとは思います。
そこで、入力フィールドの HTML と w2form オブジェクト宣言を分ける例を示します。
■入力フィールドの HTML と w2form オブジェクト宣言を分ける例
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script> </head> <body> <div id="testForm" style="width: 500px"> <div class="w2ui-page page-0"> <div class="w2ui-field"> <label>名前:</label> <div> <input name="name" maxlength="100" size="40"/> </div> </div> <div class="w2ui-field"> <label>住所:</label> <div> <input name="address" maxlength="100" size="40"/> </div> </div> <div class="w2ui-field"> <label>備考:</label> <div> <textarea name="comment" style="width: 300px; height: 50px;"></textarea> </div> </div> </div> <div class="w2ui-buttons"> <input type="button" value="リセット" name="reset"/> <input type="button" value="保存" name="save"/> </div> </div> </body> <script> $(function () { $('#testForm').w2form({ name : 'testForm', header : 'Test Form', fields : [ { field: 'name' , type: 'text', required: true }, { field: 'address', type: 'text', required: true }, { field: 'comment', type: 'text'} ], actions: { reset: function () { this.clear(); }, save: function () { this.save(); } } }); }); </script> </html>
これを実行させると以下の様な表示になります。
今後はさらに w2ui.form のいろんな使い方をご紹介したいと思います。
関連する記事
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み(url)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録(save)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録2(changesデータにレコードを反映し save)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの書式設定(render)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定(editable)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定2(editable, selectType, onCopy, onPaste)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定3(editable, onKeyDown, onCopy, onPaste)
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・カラム名のグループ化(タイトルの2行表示)
-
jQuery の onメソッド を使ってマウスクリックやキー入力等に関連するイベント処理用の関数(イベントハンドラ)を jQuery要素 に割り当てることができます。
通常であればその関数に渡されるイベントオブジェクトを使ったりして処理を行います。 例としてある対象要素のクリック時のイベント宣言は以下の様になります。$('button').on('click', function(event) { console.log('click !!'); });
上記はイベントハンドラの引数に event を宣言していますが、これはイベントオブジェクトと呼ばれるもので、 対象要素のイベントに関する各種の情報が入っています。 たとえば、クラス名やID名等を持っていますので、この中の情報を参照することでいろんな処理も可能です。
(なお、イベントハンドラの引数は省略できます。)
そこで表題の件ですが、イベントオブジェクトとは異なるデータを渡したい場合はどうするのでしょうか。
jQuery のドキュメントには以下の様に説明があります。.on( events [, selector ] [, data ], handler(eventObject) ) <パラメータ> events (文字列) "click"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。 また、スペース区切りで複数のイベントを指定することも可能です。 selector (文字列) 選択jQueryオブジェクトの子孫要素を設定することでイベントデリゲートできる。 data (マップ値) イベントハンドラに渡したいデータをマップ値で指定します。 handler (関数) eventsに対するイベントハンドラ。
この data を使ってイベントハンドラにデータを渡すことになります。 (以下の様な連想配列で宣言します。)var testdata = { data1: "abcde", data2: 1200 };
それでは上記の data を使う例を示します。 button タグを3個配置し、各ボタンのイベントハンドラに2個のデータを渡す様にしました。<html> <head> <meta charset="utf-8"> <title>test Event Para - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function () { //button クリックイベント関数宣言(引数:button の「id」値) $("#button1").on('click', { paraId: "button1", paraData: "10" }, clickFunc); $("#button2").on('click', { paraId: "button2", paraData: "20" }, clickFunc); $("#button3").on('click', { paraId: "button3", paraData: "30" }, clickFunc); }); function clickFunc(event) { //引数値は自分自身オブジェクトの項目として参照 var id = event.data.paraId; //「paraId」値 var data = event.data.paraData; //「paraData」値 console.log("button id = " + id + ", data = " + data); } </script> </head> <body> <h2>test Event Para - 1</h2> <button id="button1">ボタン1</button> <button id="button2">ボタン2</button> <button id="button3">ボタン3</button> </body> </html>
渡されるデータ値はイベントオブジェクトの data プロパティの中のプロパティを参照する様にします。
なお、そのイベントハンドラに渡されるイベントオブジェクトを使うことでID名、クラス名等が参照できます。function clickFunc(event) { //id のみ取得であればイベントオブジェクト[event.currentTarget.id]に値が在る! console.log("button id = " + event.currentTarget.id + ", type = " + event.type); }
■jQuery ではなく javascript の addEventListener メソッドを使う方法
上記の例では jQuery の on メソッドを使ってイベント関数への引数の渡し方を説明しましたが、 javascript そのものの addEventListener メソッドを使う方法について説明します。
addEventListener を使う場合は、第1引数にイベントの種類を文字列で指定し、 第2引数でイベント処理関数を指定します。HTMLファイルは以下の様になります。
<html> <head> <meta charset="utf-8"> <title>test Event Para - 2</title> <script type="text/javascript"> //ロード時にイベント処理関数設定 window.onload = function(){ document.getElementById('button1').addEventListener('click', clickFunc); document.getElementById('button2').addEventListener('click', clickFunc); document.getElementById('button3').addEventListener('click', clickFunc); } //addEventListener で登録される関数 function clickFunc(event) { console.log(event); } </script> </head> <body> <h2>test Event Para - 2</h2> <button id="button1">ボタン1</button> <button id="button2">ボタン2</button> <button id="button3">ボタン3</button> </body> </html>
そこでイベント関数に引数を渡すのですが、addEventListener の第2引数はイベント処理関数そのものでは無く、 オブジェクトとして渡すことが出来ます。 以下の様にオブジェクトの handleEvent プロパティにイベント処理関数を指定します。 「ロード時にイベント処理関数設定」の部分だけを抜粋してその方法を示します。
window.onload = function(){ document.getElementById('button1').addEventListener('click', { handleEvent: clickFunc } ); document.getElementById('button2').addEventListener('click', { handleEvent: clickFunc } ); document.getElementById('button3').addEventListener('click', { handleEvent: clickFunc } ); }
addEventListener の第2引数にオブジェクトが渡せるということは、 他のデータも別のプロパティとして渡せることになります。<html> <head> <meta charset="utf-8"> <title>test Event Para - 3</title> <script type="text/javascript"> //ロード時にイベント処理関数設定 window.onload = function(){ document.getElementById('button1').addEventListener('click', { handleEvent: clickFunc, para1: "10", para2: "aa" } ); document.getElementById('button2').addEventListener('click', { handleEvent: clickFunc, para1: "20", para2: "bb" } ); document.getElementById('button3').addEventListener('click', { handleEvent: clickFunc, para1: "30", para2: "cc" } ); } //addEventListener で登録される関数 function clickFunc(event) { //[this]には addEventListener の第2引数そのものが渡される console.log(this.para1); console.log(this.para2); console.log(event); } </script> </head> <body> <h2>test Event Para - 3</h2> <button id="button1">ボタン1</button> <button id="button2">ボタン2</button> <button id="button3">ボタン3</button> </body> </html>
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript 配列の作成と初期化について
⇒JavaScript 連想配列の作成と初期化について
⇒JavaScript 配列の操作について
⇒JavaScript 連想配列の操作について(this キーワード)
-
今回は「オブジェクトストア」のデータを削除する方法について説明します。
データ削除を行う場合でも、データ追加処理と同様にデータベースの「トランザクション」を取得し、 「トランザクション」から「オブジェクトストア」オブジェクトを取得します。
その後で「オブジェクトストア」オブジェクトの delete メソッドでデータ削除のリクエストを行います。
delete メソッドの書式とイベント関数の定義は以下の様になります。 (尚 delete の引数のキー範囲指定は getAll と同様です。)// deleteメソッド(objectStore:「オブジェクトストア」オブジェクト) var request = objectStore.delete( key ); request.onsuccess = function(event) { // 削除が成功した場合の関数宣言 }; request.onerror = function(event) { // 削除エラーの場合の関数宣言 }; <パラメータ> ・key:キー文字列または IDBKeyRange オブジェクトのクエリー指定 <戻り値> request :IDBRequest オブジェクト
■簡単な delete メソッドの利用
<html> <head> <meta charset="utf-8"> <title>test IndexedDB - delete - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // ブラウザ対応宣言 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // データベース(IDBDatabase)インスタンス var db; // データベース名 var dbName = "TestDB"; // オブジェクトストア名 var objStoreName = "Test1"; /** * DB接続処理 */ function openDB() { // データベースオープン:[名称:TestDB] var request = indexedDB.open(dbName); //オープンが正常の場合の関数宣言 request.onsuccess = function(event) { //データベースインスタンス保存 db = event.target.result; console.log("DBオープンOK"); }; //エラーの場合の関数宣言 request.onerror = function(event){ console.log("DBオープンエラー"); }; } /** * データ追加処理 */ function delData() { //キー値 var id = $("#id").val(); //トランザクション var transaction = db.transaction(objStoreName, 'readwrite'); //オブジェクトストアにアクセスします。 var objectStore = transaction.objectStore(objStoreName); //削除処理開始 var request = objectStore.delete(id); request.onsuccess = function(event) { console.log('削除成功。'); }; request.onerror = function(event) { console.log('取得失敗。event:', event); }; } </script> </head> <body> <h2>test IndexedDB - delete - 1</h2> <button id="buttonOpen" onclick="openDB()">DBオープン</button> id:<input type="text" name="id" id="id" value="" /> <button id="buttonDel" onclick="delData()">データ削除</button> <br /> </body> </html>
ブラウザの「ウエブ開発ツール」の「ストレージ」の表示で「Indexed DB」⇒「TestDB」⇒「Test1」を確認したものが下図です。
さてここでデータの削除を行ってみます。 「DBオープン」ボタンをクリック後 IDテキストボックスに "01" を入力し「データ削除」ボタンをクリックすると「削除成功。」と表示されます。
その後、ブラウザの「ウエブ開発ツール」の「ストレージ」の「Indexed DB」⇒「TestDB」⇒「Test1」の再読込をを確認したものが下図です。 KEYが "01" のデータが存在せず "02" からの一覧表示になっています。
但し、既に存在しないキーで削除を行っても、エラーは発生しませんでした。
■delete メソッドにキー範囲の指定
getAll メソッドの時と同様に delete メソッドにキー範囲指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ~ '22' の範囲指定で指定しています。<html> <head> <meta charset="utf-8"> <title>test IndexedDB - delete - 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // ブラウザ対応宣言 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // データベース(IDBDatabase)インスタンス var db; // データベース名 var dbName = "TestDB"; // オブジェクトストア名 var objStoreName = "Test1"; /** * DB接続処理 */ function openDB() { // データベースオープン:[名称:TestDB] var request = indexedDB.open(dbName); //オープンが正常の場合の関数宣言 request.onsuccess = function(event) { //データベースインスタンス保存 db = event.target.result; console.log("DBオープンOK"); }; //エラーの場合の関数宣言 request.onerror = function(event){ console.log("DBオープンエラー"); }; } /** * データ追加処理 */ function delData() { //トランザクション var transaction = db.transaction(objStoreName, 'readwrite'); //オブジェクトストアにアクセスします。 var objectStore = transaction.objectStore(objStoreName); //キーの範囲指定オブジェクト var query = IDBKeyRange.bound('01', '22'); //キー範囲:'01'~'22' //削除処理開始 var request = objectStore.delete(query); request.onsuccess = function(event) { console.log('削除成功。'); }; request.onerror = function(event) { console.log('取得失敗。event:', event); }; } </script> </head> <body> <h2>test IndexedDB - delete - 2</h2> <button id="buttonOpen" onclick="openDB()">DBオープン</button> <button id="buttonDel" onclick="delData()">データ削除</button> <br /> </body> </html>
ブラウザの「ウエブ開発ツール」の「ストレージ」の表示で「Indexed DB」⇒「TestDB」⇒「Test1」のデータを全て手動で削除し、 「JavaScript IndexedDB の使い方2(データ追加)」の最後の部分の6件のデータ生成で再度データを追加します。
その後、上記のHTMLソースをロードし、 「DBオープン」ボタンをクリック後 「データ削除」ボタンをクリックすると、キー範囲が '01' ~ '22' のデータが全て削除されていることが分かります(下図参照)。
関連する記事
⇒JavaScript IndexedDB の使い方1(データベースオープン)
⇒JavaScript IndexedDB の使い方2(データ追加)
⇒JavaScript IndexedDB の使い方3(データ取得)
⇒JavaScript IndexedDB の使い方4(全データ取得)
⇒JavaScript IndexedDB の使い方5(カーソル処理)
⇒JavaScript IndexedDB の使い方6(データ削除)