TOC PREV NEXT INDEX

Put your logo here!


例 7: イベントオブジェクト定数を表示する

この例によって、イベントオブジェクトの定数すべてとその値が表示される一覧表を作成するための DOM の使用方法を示します。役に立つ DOM の特徴をいくつかご紹介しますが、その中には Event.prototype プロパティーが含まれ、これによって、特定のオブジェクトのプロパティ、この試作品の中で、プロパティをループで繰り返す適当なパターン、一覧表に表示される定数自体の値を知ることが可能になります。注意点として、中間範囲にある定数は、イベントの間にインプットのあった実際のキーを表します(そして charCode プロパティを使って取り出し可能)。

イベントオブジェクトの定数を見るのに、以下のコードをウェブページとして読み込んでください。

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<!--
* ***** ライセンスについて、始まり *****
* Version: NPL 1.1/GPL 2.0/LGPL 2.1
*
* このファイルのコンテンツは Netscape の公開ライセンスの対象となります
* 版 1.1 ("ライセンス"); ライセンス内容を遵守することなく
* このファイルを使用できません。ライセンスのコピーは
* http://www.mozilla.org/NPL/ にて入手できます
*
* ライセンスによって配布されるソフトウェアは、明示あるいは黙示を問わず
* いかなる保証もなく、アフターサービスなしで配布されます
* ライセンスの下の権利と制限事項に関わる固有用語については
* ライセンスをご参照ください
*
i??* 寄稿者:
* Alexander J. Vincent <jscript@pacbell.net>
*
* 別の選択肢として、このファイルの内容は
* GNU General Public License の第 2 版か以降の版 ("GPL"と呼ぶ)、または
* GNU Lesser General Public License 版 2.1 か以降の版 ("LGPL"と呼ぶ)、のいずれかの条件に従って使用され、
* この場合は、上記の NPL ライセンス条件の代わりに、GPL か LGPL が適用されます。
* もし、GPL か LGPL のいずれかの条件の下に、このファイルの自分の版のみの使用を許可するこを欲し、
* 他人が NPL の条件のもとでこのファイルの自分の版を使用することを
* 欲さない場合は、NPL の提供内容を削除し、
* GPL か LGPL が要求する他の提供内容とその旨の通告に置き換えることで、
* 自分自身の決定を表明してください。
* NPL の提供内容を削除しないならば、利用者は
* NPL、GPL、LGPL、のいずれかの条件の下にこのファイルを使用可能なものとします
*
* ***** ライセンスについて、終わり ***** * -->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title></title>
<script language="JavaScript" type="text/javascript">
<!--
function respond() {
//一覧表を作成
var table = document.createElement("table")
table.setAttribute("border", "1")
var tbody = document.createElement("tbody")
var y = 0
var tr = document.createElement("tr")
var td = document.createElement("th")
// ループで同じ変数名を再使用
// 情報を導く一覧表を開始
td.appendChild(document.createTextNode("Index"))
tr.appendChild(td)
td = document.createElement("th")
td.appendChild(document.createTextNode("Property Name"))
tr.appendChild(td)
td = document.createElement("th")
td.appendChild(document.createTextNode("Property Value"))
tr.appendChild(td)
tbody.appendChild(tr)
// 情報を導く一覧表を終了
for (property in Event.prototype) {
if (property == property.toUpperCase()) {
// イベントオブジェクトの各プロパティに対して新しい行を追加
tr = document.createElement("tr")
td = document.createElement("td")
td.appendChild(document.createTextNode(y))
// どのプロパティ番号に当たるか
tr.appendChild(td)
y++
td = document.createElement("td")
var td_text = document.createTextNode(property)
// プロパティ名
td.appendChild(td_text)
tr.appendChild(td)
td = document.createElement("td")
var td_text = document.createTextNode(Event.prototype[property])
// プロパティ値
td.appendChild(td_text)
tr.appendChild(td)
tbody.appendChild(tr)
}
}
table.appendChild(tbody)
document.body.appendChild(table)
}
//-->
</script>
</head>
<body onload="respond()">
<!-Results after clicking on the button:
The this object is myInput.
Index Property Name Property Value
0 type click
1 target [object HTMLInputElement]
...
-->
</body>
</html>

mozilla DOM project | mailto:oeschger | tracking bug
TOC PREV NEXT INDEX