イベントモデルの理解

  • [アーティクル]
Understanding the Event Model Understanding the Event Model *
*前のトピック: エレメントとコレクションにおけるスクリプト記述
*次のトピック: フレーム間のスクリプト記述とセキュリティ

イベントモデルの理解

“イベント”とは、アクションへの反応を通知するものである。例えば、ドキュメントが表示されている間に状態が変わったり、ユーザーがマウスをクリックしたり、キーを押したりしたことを通知する。“イベントハンドラ”は、それが対応するイベントが起こったときに制御を受け取るコードであり、通常スクリプトで書かれた関数やルーチンである。次のトピックでは、イベントとイベントハンドラについて解説し、ドキュメントでどのように使うかを説明している。

arrowr.gifイベントのライフ サイクル

arrowr.gifイベントハンドラの関連付け

arrowr.gifイベントバブルの詳細

arrowr.gif戻り値とデフォルトアクションのキャンセル

arrowr.gifイベントハンドラの有効範囲

arrowr.gifeventオブジェクト

arrowr.gifキーボードイベント

arrowr.gifマウスイベント

arrowr.gifフォーカス イベントとセレクション イベント

arrowr.gifLoadイベントとReadystateイベント

arrowr.gifその他のイベント

イベントのライフ サイクル

イベントハンドラは、それを発生させるアクションや状態から始まり、イベントハンドラがInternet Explorerによる最終対応で終わるライフ サイクルがある。イベントの典型的なライフ サイクルのステップを次に示す。

  1. イベントに関連するユーザー アクションや状態が生じる。
  2. eventオブジェクトが直ちに更新され、イベントの状態を反映する。
  3. イベントが発生する。これが実際のイベントへの反応の通知となる。
  4. ソース エレメントのイベントハンドラが呼び出される。イベントハンドラはそのアクションを実行し戻る。
  5. イベントは階層の次のエレメントにバブルアップし、そのエレメントのイベントハンドラが呼び出される。このステップは、イベントがwindowオブジェクトまでバブルアップするか、イベントハンドラがバブリングをキャンセルするまで繰り返される。
  6. イベントハンドラがキャンセルしなかった場合だけ、最後にデフォルトアクションが（ある場合には）実行される。

バブルアップするイベントの場合、ソース エレメントにイベントハンドラがないときは、階層の次のエレメントのイベントハンドラが呼び出される。

イベントハンドラがそのアクションを実行するとき、eventオブジェクトを使ってイベントについての情報（マウスの位置、キーボード キーの状態など）を読み出す。

次の例では、onclickイベントを扱う"wasClicked"というイベントハンドラを定義し、BODYエレメントと関連付ける。ユーザーがこのドキュメント内でマウスボタンをクリックすると、イベントが発生し、イベントハンドラが"I was clicked"というメッセージとイベントが生じたエレメントのタグ名を表示する。 

<HTML>
<BODY onclick="wasClicked()">
<H1>Welcome!</H1>
<P>This is a very <B>short</B> document.
<SCRIPT LANGUAGE="JavaScript">
function wasClicked() {
alert("I was clicked " + window.event.srcElement.tagName);
}
</SCRIPT>
</BODY>
</HTML>

eventオブジェクトのsrcElementプロパティは、イベントが生じたエレメントオブジェクトを指す。これは、イベントの反応としてイベントハンドラがどう対応するかを決定するときに役立つ。

Pエレメントに別のイベントハンドラ"wasAlsoClicked"を対応づけることで、documentエレメントの親子関係を示す。 

<HTML>
<BODY onclick="wasClicked()">
<H1>Welcome!</H1>
<P onclick="wasAlsoClicked()">This is a very <B>short</B> document.
<SCRIPT LANGUAGE="JavaScript">
function wasClicked() {
alert("I was clicked " + window.event.srcElement.tagName);
}
function wasAlsoClicked() {
alert("You clicked me " + window.event.srcElement.tagName);
}
</SCRIPT>
</BODY>
</HTML>

上記の例では、ユーザーが見出しの"Welcome!"をクリックすると、"I was clicked H1"というメッセージが表示される。しかし、ユーザーが"short"という単語をクリックすると、2つのメッセージ（"You clicked me B"の後に"I was clicked B"）が表示される。最初の例では、"Welcome!"のクリックがonclickイベントを発生し、イベントのソース エレメントとしてH1エレメントを設定する。このエレメントに対するイベントハンドラはないので、イベントは階層の親エレメント（BODY）までバブルアップし、そのイベントハンドラであるwasClickedが呼び出される。

2番目の例では、ユーザーが"short"をクリックすると、onclickイベントが再び発生する。このとき、Bエレメントがソース エレメントとして設定される。 Bに対するイベントハンドラはないので、そのイベントはPエレメントまでバブルアップし、そのイベントハンドラであるwasAlsoClickedが呼び出される。wasAlsoClickedから戻ると、そのイベントは次の親エレメント（BODY）まで階層をバブルアップし、wasClickedが呼び出される原因となる。

イベントが階層にバブルアップしないようにするには、イベントハンドラでeventオブジェクトのcancelBubbleプロパティをtrueに設定する。イベントハンドラから戻ると、そのイベントはバブリングを止め、即座に終了する。このキャンセルは現在のイベントだけに影響し、続くイベントには影響しない。続くイベントはキャンセルされるまではバブルアップする。

次の例を考えてみる。2つのイベントハンドラ（SetBodyStyleとsetParaStyle）を定義し、ユーザーがドキュメントや段落をそれぞれクリックしたときに呼び出されるようにする。ユーザーが段落をクリックすると、段落に対するスタイルだけが変更され、setParaStyleイベントハンドラがcancelBubbleを使ってイベントがBODYまでバブリングするのを防いでいることを確認すること。 

<HTML>
<BODY onclick="setBodyStyle()">
<H1>Welcome!</H1>
<P onclick="setParaStyle()">This is a very <B>short</B> document.
<SCRIPT LANGUAGE="JavaScript">
function setBodyStyle() { // Set all headings to green
var coll = document.all.tags("H1");
for (i=0; i<coll.length; i++)
coll.item(i).style.color = "green";
}
function setParaStyle() { // Underline the paragraph
var el = window.event.srcElement;
while ((el != null) && (el.tagName != "P")) {
el = el.parentElement;
}
if (el != null) el.style.textDecoration = "underline";
window.event.cancelBubble = true;
}
</SCRIPT>
</BODY>
</HTML>

上記の例では、ソース エレメントがPであるとは仮定していないことに注意すること。ユーザーがBエレメントでクリックするとは限らないので、イベントハンドラではスタイルを適用する前にエレメントをチェックしなくてはならない。この場合、イベントハンドラはparentElementプロパティを使い、Pエレメントが見つかるまで、そのエレメントの階層を上がる。

イベントハンドラの関連付け

イベントハンドラは、イベントが発生したときに呼び出されるように、特定のイベントと特定のエレメントやオブジェクトとを関連付けなくてはならない。イベントハンドラを関連付けるには、以下のいずれかの方法で行う。

**イベントハンドラ関数を宣言する。**次に、HTMLタグのインライン イベント属性に関数呼び出しを割り当てる。例えば、次の例では、"flip"というJScript関数を定義し、IMGエレメントにonmouseoverイベントに対するイベントハンドラとして割り当てている。 

<SCRIPT LANGUAGE="JavaScript">
function flip() {
// Carry out some work
}
</SCRIPT>
.
.
.
<IMG SRC="sample.gif" onmouseover="flip()">

この例では、関数が関連付けられているが、ここには、イベントが発生するたびに評価されるさまざまな式を使用できる。式を書くためには、関数名の後に括弧が必要となる。

**イベントを処理するコードを宣言する。**次に、SCRIPTタグのFOR=属性とEVENT=属性を使ってイベントにコードを関連付ける。次の例では、JScriptコードを定義し、"MyImage"識別子のあるIMGエレメントに対するonmouseoverイベントとして関連付ける。 

<SCRIPT FOR=MyImage EVENT=onmouseover LANGUAGE="JavaScript">
// Carry out some work
</SCRIPT>
.
.
.
<IMG ID=MyImage SRC="sample.gif">

**VBScriptスクリプトでイベントハンドラ関数を宣言する。**次に、このフォーム名（id_event）を与えてイベントに関連付ける。次の例では、onmouseoverイベントハンドラとしてIMGエレメントを処理するVBScript関数を定義する。 

<SCRIPT LANGUAGE="VBScript">
Function MyImage_onmouseover
' Carry out some work
End Function
</SCRIPT>
.
.
.
<IMG ID=MyImage SRC="sample.gif">

一般的な規則として、常にイベントハンドラは、できる限りドキュメントの最初に宣言と関連付けを記述しなくてはならない。使用するメソッドにもよるが、イベントハンドラは、ドキュメントがロードされるかロードされた直後にイベントの処理を開始する。次のリストで説明する。

JScriptイベントハンドラ インライン イベント属性を使って設定する場合は、エレメントが作成されるときに関連付ける。
FOR=およびEVENT=イベントハンドラコード ドキュメントが完全にロードされるときに関連付ける。
VBScriptイベントハンドラ ドキュメント、それに含まれるオブジェクトやアプリケーションすべてがロードされているときに関連付けられる。

ドキュメントがロードされている最中に生じるイベントもある。このときにイベントを処理する場合は、JScriptとインライン イベント属性を使い、エレメントが作成されるときにイベントハンドラを関連付ける。

ドキュメントの1つ以上のエレメントに、同じイベントハンドラを関連付けることもできる。これは、複数のエレメントで同じイベントが発生するときに必ず、同じアクションを生じさせる場合に役立つ。通常、イベントハンドラはイベントの1つの種類だけを処理できるように記述されるが、1つ以上の種類を処理できるイベントハンドラを作成することも可能である。

イベント1種類ごとに1つのイベントハンドラだけと限る必要はない。あるエレメントであるイベントに対して発生させたいアクションが、他のエレメントでの同じイベントに対するアクションとは異なる場合、2つのイベントハンドラを定義でき、それぞれのエレメントに各々を関連付けることができる。一般的に、イベント1種類に対してイベントハンドラをいくつでも定義でき、ドキュメントの複数のエレメントに各々を関連付けられる。

ドキュメントで処理するメソッドを組み合わせて使う場合、同じエレメントの同じイベントに対して複数のイベントハンドラを定義することもできる。例えば、JScriptとVBScriptのイベントハンドラの両方を定義でき、同じイベントとエレメントに、それぞれのイベントハンドラを関連付けられる。このように、異なる言語の1つ以上のイベントハンドラを関連付けると、すべてのイベントハンドラはそのイベントを受け取るが、イベントを受け取る順番は指定できない。

同じイベントとエレメントに対して同じスクリプト言語で書かれた2つのイベントハンドラを関連付けた場合、1つのイベントハンドラだけがそのイベントを受け取る。多くの場合、これはエレメントに対して結合した最初のイベントハンドラとなる。しかし、FOR=属性とEVENT=属性により関連付けられたイベントハンドラは、インライン イベント属性により関連付けられたイベントハンドラより優先される。

インライン属性で関連付けるには、通常は属性にイベントハンドラ関数を割り当て、イベントが発生するときに呼び出しを引き起こすようにする。しかし、イベントハンドラに呼び出しを割り当てることは必要ではない。その代わり、あらゆる有効なスクリプト コードを割り当てることができる。このコードは、イベントが発生すると実行される。例えば、次のBUTTONエレメントは、そのボタンがクリックされたときに" Hello World!"というメッセージを表示する。 

<BUTTON onclick="alert('Hello World!')" LANGUAGE="JavaScript">Click Me</BUTTON>

このメソッドは、そのコードが比較的短く簡単な場合に便利である。このように、インライン属性を使用する場合、LANGUAGE=属性を使ってコードに対するスクリプト言語も指定できる。言語を指定しない場合は、デフォルトの言語か最近使った言語が指定される。

eventプロパティへの関連付け

エレメントのインライン イベント属性もプロパティとして利用できる。従って、このプロパティを使って、いつでもエレメントに対するイベントハンドラを動的に変更できる。例えば、ハンドラを持っていないエレメントにイベントハンドラを関連付けたり、既存のイベントハンドラを他のイベントハンドラに変更したりできる。イベントハンドラの追加や変更は、イベントによるアクションがエレメントの現在のコンテントに反映することを確かめる場合に役立つ。

次のJScriptの例では、eventプロパティを使ってsetHeadStyleというイベントハンドラをH1エレメントに割り当て、エレメントのonclickプロパティにその関数への呼び出しを割り当てる。 

<H1 id=MyHeading>Welcome!</H1>
.
.
.
<SCRIPT LANGUAGE="JavaScript">
function setHeadStyle() {
window.event.srcElement.style.color = "green";
}


document.all.MyHeading.onclick="setHeadStyle()";
</SCRIPT>

イベントハンドラを関連付ける他の方法は、（関数の呼び出しではなく）関数のポインタをプロパティに割り当てる方法である。次に例を示す。VBScriptでは、関数のポインタはサポートされない。 

document.all.MyHeading.onclick=setHeadStyle;

カスタム イベントやパラメータのあるイベントの処理

FOR=属性とEVENT=属性を使うと、埋め込みオブジェクトで発生したカスタム イベントと、イベントが生成したパラメータのすべてに、アクセスするイベントを関連付けられる。属性やプロパティを使って関連付けた標準的なイベントと違い、カスタム オブジェクトの場合は、この方法を利用できない。

FOR=属性を使って、オブジェクト、アプリケーション、または、コントロールの識別子や名前を割り当てることで、エレメントや処理するオブジェクトを指定できる。同じ識別子や名前のあるエレメントやオブジェクトが複数存在する場合、最初の1つだけがイベントハンドラに関連付けられる。名前は識別子よりも優先される。この属性を指定しない場合は、イベントハンドラはデフォルトのウィンドウに関連付けられる。JScriptは大文字と小文字の区別を行うので、識別子や名前の種類は、対応するエレメントやオブジェクトで表示されるものを正確に指定しなくてはならない。

EVENT=属性を使うと、イベント名を割り当てることで関連するイベントを指定できる。（定義済みのものにはほとんどないが）イベントがパラメータを生成する場合、イベント名の直後に括弧で囲んでカンマで区切ったパラメータ名のリストも指定できる。これらのパラメータは非入力である。JScriptでは大文字と小文字を区別するので、イベント名が常に小文字であることを確認する必要がある。また、パラメータ リストを与える場合、VBScriptではイベントの全パラメータ定義が（たとえ使われなくても）必要となる。

次のJScriptの例では、コードを処理するイベントをウィンドウのonerrorイベントと関連付ける。このイベントは、ロード中のドキュメントにエラーが見つかると発生する。このイベントはパラメータを生成するので、パラメータ リストが与え、その中の"lineno"パラメータをコードで使用する。 

<SCRIPT FOR=window EVENT="onerror(message, url, lineno)" LANGUAGE="JavaScript">
alert("An error has occurred on line " + lineno);
</SCRIPT>

次のJScriptの例では、埋め込みオブジェクトで発生する"ondatechange"というカスタム イベントで、コードを処理するイベントに関連付ける。 

<OBJECT ID=myDateObject ... ></OBJECT>
<SCRIPT FOR=myDateObject EVENT="ondatechange()" LANGUAGE="JavaScript">
// Carries out an action when the date changes
</SCRIPT>

カスタム イベントの処理とイベント パラメータの受け取りに関する他の方法は、VBScriptのイベントハンドラを関連付けることである。この場合、イベントハンドラ名のためにVBScriptのid_event形式を使い、必要な場合にはパラメータを指定する。次の VBScriptの例では、onerrorイベントを処理し、そのパラメータを受け取る。 

<SCRIPT LANGUAGE="VBScript">
Function window_onerror(message, url, lineno)
alert "An error has occurred on line " & lineno
End Function
</SCRIPT>

同様に、次のVBScriptの例では、埋め込みオブジェクトで発生したondatechangeカスタム イベントを処理する。 

<OBJECT ID=myDateObject ... ></OBJECT>
<SCRIPT LANGUAGE="VBScript">
Function myDateObject_ondatechange()
// Carries out an action when the date changes
End Function
</SCRIPT>

イベントバブルの詳細

イベントバブルでは、イベントが生じるすべてのエレメントのイベントハンドラに、そのイベントに応答する機会を保証する。次の例で考えてみる。 

<P onclick="doPara()">
Jump to a <B>sample</B> document.
</P>

ユーザーは、"sample"の単語がクリックされると、Pエレメントの他の単語をクリックするのと同じアクション（"doPara"というイベントハンドラを呼び出す）が引き起こると思うだろう。しかし、イベントがソース エレメントからバブルアップしないと、"sample"の単語をクリックしてもアクションは起こらない。これは、Bエレメントに関連付けられたイベントハンドラがないからである。イベントがエレメント階層からバブルアップするので、エレメントの親階層の各イベントハンドラは応答の機会を得る。そして、この場合、"doPara"が、"sample"をユーザーがクリックすると呼び出される。

イベントバブルに注意しておかないと、結果に困惑するであろう。例えば、onmouseoverイベントとonmouseoutイベントを使い、段落のコレクションを表示したり非表示にしたりするドキュメントを考えてみる。また同時に、リスト中でイベントを使って、コレクションの段落を強調する。 

<DIV onmouseover="showPara()" onmouseout="hidePara()">
My Menu
<P STYLE="display:none" onmouseover="highlight()" onmouseout="unhighlight()">Item 1
<P STYLE="display:none" onmouseover="highlight()" onmouseout="unhighlight()">Item 2
</DIV>

上記の例では、ユーザーが"My Menu"という単語にマウスを移動した後、"Item 1"から最後に"Item 2の単語へと移動するとしよう。すると次のようなことが起こる。

  1. マウスカーソルが"My Menu"上に移動する。
  2. onmouseoverイベントがDIVエレメントに対して発生し、"showPara"が呼び出される。
  3. マウスカーソルが"My Menu"から移動する。
  4. onmouseoverイベントがDIVエレメントに対して発生し、"hidePara"が呼び出される。
  5. マウスカーソルが"Item 1"に移動する。
  6. onmouseoverイベントがPエレメントに対して発生し、"highlight"が呼び出される。
  7. onmouseoverイベントがDIVエレメントまでバブルアップし、"showPara"がソース エレメントPで呼び出される。
  8. マウスカーソルが"Item 1"から移動する。
  9. onmouseoutイベントがPエレメントに対して発生し、"unhighlight"が呼び出される。
  10. onmouseoutイベントがDIVエレメントまでバブルアップし、"hidePara"がソース エレメントとしてPで呼び出される。
  11. マウスカーソルが"Item 2"に移動する。
  12. onmouseoverイベントがPエレメントに対して発生し、"unhighlight"が呼び出される。
  13. onmouseoverイベントがDIVエレメントまでバブルアップし、"showPara"がソース エレメントとして2番目のPで呼び出される。

お分かりのように、ユーザーがコレクションの段落へ、またはその段落からマウスを移動すると、必ずDIVに対するイベントハンドラが呼び出される。このイベントハンドラを何の考慮もなく記述すると、その段落は必要とされないときに非表示となる。

一般的に、このようにネストされたイベントハンドラを使うときは、そのイベントハンドラが呼び出されるたびにアクションを実行すべきかどうかを考慮しなくてはならない。アクションを制御するには、cancelBubbleプロパティを使用する。前の例では、"highlight"と"unhighlight"イベントハンドラでcancelBubbleをtrueに設定し、イベントがDIVエレメントへバブルアップするのを防ぐ。他の方法としては、イベントに対するソース エレメント（eventオブジェクトのsrcElementプロパティ）をチェックし、エレメントに適用するアクションを取得する。

戻り値とデフォルトアクションのキャンセル

イベントハンドラは、そのスクリプト言語で定義される戻り値のメカニズム（JScriptではreturnステートメント）を使用するか、eventオブジェクトのreturnValueプロパティを使用することで、イベントに値を返すことができる。

戻り値によって、イベントのデフォルトアクションを制御すると便利である。例えば、Aエレメントをクリックすると、ブラウザはhref属性で指定されたドキュメントをロードする。イベントハンドラからfalseを返すことで、このようなデフォルトアクションをキャンセルできる。

すべてのスクリプト言語で戻り値をサポートする訳ではない。サポートしない言語では、returnValueプロパティを使うと戻り値を設定できる。スクリプト言語で戻り値をサポートする場合、その言語（戻り値の定義されたメソッド）またはreturnValueを使用できる。両方のメソッドを使った場合、プロパティが常に優先される。

イベントバブルが終了したあとで、デフォルトアクションを実行するかどうかをreturnValueがfalseであるかどうかで決定する。このプロパティが設定されていないときは、最後に実行した関数の戻り値がfalseかどうかを調べる。いくつかのイベントにはデフォルトアクションがなく、returnValueの値を別の目的に使うことに注意すること。

デフォルトアクションのキャンセルは、イベントバブルのキャンセルとは異なる。デフォルトアクションはキャンセルしても、イベントを階層からバブルアップさせることができる。

イベントハンドラの有効範囲

スクリプトはFORMコンテナの内部に書かれたか、その外に書かれたかにより、有効範囲の規則が異なる。windowオブジェクトで利用可能な実行するイベントハンドラとエレメントに適用される。異なるシナリオについて以下に示す。

イベントが発生すると、特別なオブジェクト リファレンス（VBScriptではmeポインタ、JScriptではthisポインタ）がイベントを発生した現在のエレメントに設定される。

1) フォームの外側にあるボタンに対するイベントハンドラ

これは基本的な場合である。すでに記述したあらゆる処理メカニズムを使用できる。ただし、windowオブジェクトのformブロックのエレメントに直接アクセスすることだけはできない。その代わり、documentオブジェクトや特定のフォームのエレメント コレクションからアクセスできる。

2) フォーム内のボタンに対するFORMブロック外のイベントハンドラ

ドキュメント全体で固有の識別子を持つボタンがある場合、イベントハンドラはドキュメントのどこにでも記述できる。イベントハンドラがformブロックの外側で記述される場合、windowオブジェクトのアクセスするエレメントに、1)で記述したような同じ規則を適用される。

3) フォーム内のボタンに対するFORMブロック内部のイベントハンドラ

ボタンの識別子がドキュメントで固有でない場合、イベントハンドラはフォーム内で記述しなくてはならない。フォームの中に隠してイベントハンドラを記述するには、インライン属性か、FOR=属性とEVENT=属性（VBScriptのid_eventメソッドではない）を使用し、windowオブジェクトの有効範囲規則を変更する。この方法で定義されたイベントは、windowオブジェクトから直接、フォームの中に隠してエレメントにアクセスできる。また、フォームのエレメント名が衝突しない限り、フォームの外側にあるエレメントにも直接アクセスできる。

イベントハンドラのVBScriptのid_eventメソッドを使うと、フォームの外のエレメントだけを、ウィンドウのプロパティとしてアクセスできる。

フォーム内に複数の同じ名前のエレメントがある場合、SCRIPTエレメントのFOR=属性とEVENT=属性を使用したり、定義するイベントのVBScript id_eventメカニズムを使用すると、最初のエレメントだけがイベントハンドラに関連付けられる。

4) フォームの外側のボタンに対するFORMブロックのイベントハンドラ

4) フォームの外側のボタンに対するFORMブロックのイベントハンドラ

複数のエレメントに対するイベントハンドラを記述することができる。これは、エレメントが同じ有効範囲にない場合に行われる。有効範囲は、フォームの内部か外かで定義される。例えば、ドキュメントの有効範囲でid=genericButtonに対するイベントハンドラを記述し、ドキュメントとフォーム内にgenericButtonを追加した場合、同じクリックイベントが両方で発生する。meポインタがイベントの実際のソースを示す。これらのエレメントは、同じ種類である必要はない。

複数のエレメントが同じ識別子を持ち、同じ有効範囲にある場合、最初のエレメントだけがそのイベントを発生する。

eventオブジェクト

windowオブジェクト上のeventオブジェクトは、各イベントハンドラからアクセスでき、言語独立で、イベントの情報を取得したり、変更したりするために使われる。例えば、次のVBScriptとJScriptの例では、ともにこのオブジェクトを使用して、イベントが生じたエレメントのタグ名を表示する。 

<SCRIPT LANGUAGE="VBScript">
Function document_onclick
alert window.event.srcElement.tagName
End Function
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
function doClick() {
alert(window.event.srcElement.tagName);
}
</SCRIPT>

注　VBScriptでは、eventオブジェクトでwindowキーワードを使い、VBScriptのeventキーワードとの衝突を回避している。

srcElementプロパティは、eventオブジェクトの重要なプロパティの1つである。イベントハンドラの多くがこのプロパティを使い、イベントのソースを基にアクションを決定する。例えば、次のJScriptイベントハンドラでは、ユーザーがドキュメントのH1エレメントのどれかをクリックすると必ずアクションを実行する。 

<SCRIPT FOR=document EVENT="onclick()" LANGUAGE="JavaScript">
if ("H1" == event.srcElement.tagName) {
// user clicked on a H1
}
</SCRIPT>

その他の重要なプロパティとしてcancelBubbleプロパティがある。このプロパティは与えられたイベントに対するイベントバブルを制御する。trueに設定すると、イベントがエレメント階層をバブルアップできなくなる。

returnValueプロパティは、言語によらないイベントに値を返す方法を与える。多くのイベントでは、戻り値をfalseに設定することで、そのイベントに対するデフォルトアクションをキャンセルできる。

eventオブジェクトのいくつかのプロパティは、ある種のイベントに対してだけ意味を持つ。例えば、keyCodeプロパティは、キーボード キー イベントに対する標準のUnicodeの値を指定する整数である。このプロパティは他のイベントでは0に設定される。他の例として、toElementプロパティとfromElementプロパティは、マウスがonmouseoverイベントとonmouseoutイベントに対して、行ったり来たりするエレメントを示す。これらのプロパティは他のイベントではnullを設定する。

onclickのようなマウスイベントが生じると、xプロパティとyプロパティでマウスの水平方向と垂直方向を指定する。ソース エレメントのあるエレメントが位置指定されていない場合、マウスの位置はBODYエレメントからの相対となる。位置指定されたエレメントがソース エレメントである場合は、マウスの位置はそのエレメントからの相対となる。マウスの位置に加えて、buttonプロパティが、どのマウスボタンがイベントの時点で押されたかを示す。ボタンが押されていないと0、左ボタンが押されていると1、右ボタンが押されていると2、両方のボタンが押されていると3が設定される。

すべてのイベントに役立つプロパティは、altKey、ctrlKey、shiftKeyである。これらのプロパティでは、ALT、CTRL、SHIFTキーがイベントの時点でどうなっていたかを示す。これらのプロパティは、キーが押された場合はtrueとなる。次のVBScriptの例では、SHIFTキーがイベント発生時に押された場合に、Aエレメントに対するデフォルトアクションをキャンセルする。 

<SCRIPT FOR=document EVENT="onclick()" LANGUAGE="VBScript">
If (("A" = window.event.srcElement.tagName) and (window.event.shift)) Then
event.returnValue = false
End If
</SCRIPT>

clientXとclientYプロパティは整数であり、ウィンドウのクライアント領域での相対座標を示す。offsetXとoffsetYプロパティは整数であり、コンテナ相対の位置を示す。これらのプロパティは、エレメントのoffsetTopとoffsetLeftプロパティと一致する。offsetParentプロパティを使うと、コンテナを発見できる。screenXとscreenYプロパティは整数であり、物理的な画面に関する座標を示す。

returnValueとkeyCodeのようなプロパティは、読み書き可能なプロパティであることに注意すること。イベントハンドラは、プロパティのオリジナルの値に新しい値を上書きできる。このプロパティは、イベントがエレメント階層をバブルアップする間にこの新しい値を保持する。従って、階層の低レベルで関連付けられたイベントハンドラでは、高レベルで処理されるイベントを簡単に変更できる。

eventオブジェクトでは、ドキュメントのどこでイベントが生じたかについて詳細情報を与えるので、イベントのソースによってアクションを変えるイベントハンドラを簡単に記述できる。イベントが生じるすべてのエレメントを含むエレメントやオブジェクトにイベントハンドラを関連付けた場合、イベントバブルによってイベントが生じると必ずイベントハンドラが呼び出される。従って、イベントハンドラを各エレメントに関連付ける必要はない。

キーボードイベント

ユーザーがキーボードのキーを押したり離したりすると、キーボードイベントが発生する。onkeydownイベントとonkeyupイベントは、キーが押されるか（down）離されるか（up）により、キーの状態が変更したときに発生する。これらのイベントは、キーボードのすべてのキー（SHIFT、CTRL、ALTといったシフト キーを含む）に対して発生する。

ユーザーのキーボード入力が文字に変換されると、onkeypressイベントが発生する。例えば、ユーザーが文字キーや数値キーを押したり、シフト キーと文字キー、シフト キーと数値キーを組み合わせて押したときに、このイベントが発生する。

キーボードイベントが発生すると、eventオブジェクトのkeyCodeプロパティは対応するキーのUnicodeキーコードになる。altKey、ctrlKey、shiftKeyプロパティでは、ALT、CTRL、SHIFTキーの状態を示す。

keyCodeプロパティの値を変更したり整数値を返すことで、キーを変更できる。また、イベントをキャンセルするにはゼロやfalseを返す。

onhelpイベントは、ユーザーがヘルプ キー（F1）を押すと生じる特別なキーボードイベントである。

マウスイベント

ユーザーがマウスを移動したり左ボタンをクリックすると、マウスイベントが発生する。ユーザーがマウスを移動するとonmousemoveイベントが発生し、エレメントの内側や外側にマウスを移動するとonmouseoverイベントとonmouseoutイベントが発生する。マウスの左ボタンを押したり（down）離す（up）ことで状態が変更すると、onmousedownイベントとonmouseupイベントが発生する。ユーザーがマウスのボタンを1回クリックするとonclickイベントが発生し、ダブルクリックするとondblclickイベントが発生する。

マウスイベントが発生すると、eventオブジェクトのbuttonプロパティでマウスボタンが（どのように）押されたかを確認できる。xプロパティとyプロパティは、イベントの時点におけるマウスの位置を示す。toElementとfromElementプロパティは、onmouseoverイベントとonmouseoutイベントのために、マウスが移動するエレメントと形式を示す。

マウスクリック

ユーザーがマウスボタンを押したり離したりすると、onclickイベントが発生する。2つの連続するonclickイベント間の経過時間がシステムの（定義された）範囲内だと、ondblclickイベントが発生する。

マウスクリックイベントは、onmousedownイベントとonmouseupイベントに分けられる。例えば、onclickイベントはonmouseupイベントの次に生じる。ondblclickイベントはこの連続の最後に生じる。

onmousedown
onmouseup
onclick
onmouseup
ondblclick

また、ユーザーがBUTTONエレメントのようなフォーカスを受け取るエレメントでENTERキーを押すと、onclickイベントが生じる。この場合、前述のonmouseupイベントは発生しないでonclickイベントが発生する。

マウスクリックをキャンセルするには、falseを返すか、returnValueプロパティをfalseに設定する。

注　マウスボタンが1つしかないマウでスは、これは通常のマウスの左ボタンとなる。

エレメント間の移動

あるエレメントから他のエレメントにマウスカーソルが移動すると、必ずonmouseoverイベントとonmouseoutイベントが発生する。次の例で考えてみる。 

<H1>Move from here</H1>
<P id=myP><B><I>To here</I></B></P>

上記の例では、マウスがH1エレメントから"To here"の単語に移動すると、マウスはP、B、Iエレメントの境界を越える。しかし、イベントの順番は簡略化されて、H1エレメントの（階層をバブルアップする）onmouseoutイベント、Iエレメントの（再び階層をバブルアップする）onmouseoverイベント、となる。

eventオブジェクトのfromElementとtoElementプロパティには、マウスが行ったり来たりするエレメントオブジェクトが入る。イベントバブルにより、マウスの移動で越えた各境界を決定できる。

エレメント間で移動する場合、onmouseoutイベントが最初に発生し、マウスがオリジナルのエレメントから離れることを示す。次にonmousemoveイベントが発生し、マウスが移動することを示す。最後にonmouseoverイベントが発生し、マウスが新しいエレメントに移動したことを示す。

フォーカス イベントとセレクション イベント

フォーカス イベントとセレクション イベントにより、ユーザーがドキュメント上で行うアクションの詳細情報が分かる。

フォーカス イベントは、BUTTONや入力フォーカスを受け取れるINPUTの色々なタイプなどのエレメントで生じる。これらのエレメントに対して、エレメントがフォーカスを受け取るとonfocusイベントが発生し、エレメントがフォーカスを失った場合にはonblurイベントが発生する。ユーザーがマウスでクリックしたり、キーボードを使用してナビゲートすることで、エレメントは入力フォーカスを受け取る。ユーザーから入力を受け付ける準備をいつ行えばよいかをエレメントが知るために、これらのイベントが便利である。

フォーカス イベントは、ドキュメントのエレメント間や、デスクトップのウィンドウやアプリケーションのフレーム間で、入力フォーカスが移動したときに生じる。例えば、ドキュメントのコントロールにフォーカスがあるときに、ユーザーが他のアプリケーションに切り替えると、そのコントロールに対してonblurイベントが発生する。ユーザーがドキュメントに再び切り替えると、onfocusイベントが発生する。フォーカスを失うことをキャンセルすることはできない。

ユーザーがマウスやキーボードでドキュメントの一部を選択すると、セレクション イベントが生じる。選択が始まると、onselectstartイベントが発生する。例えば、ユーザーがドキュメントの文字やオブジェクトをクリックした場合である。ユーザーが選択範囲を変更すると、onselectイベントが発生する。例えば、マウスボタンを押したままドキュメントの上をマウスが移動する場合である。onselectstartイベントに対するデフォルトアクションは、与えられた文字やオブジェクトに選択を移動し、選択にハイライトを当てることである。このデフォルトアクションをキャンセルするには、falseを返す。

ユーザーが選択をドラッグし始めると、ondragstartイベントが発生する。ユーザーは、現在の選択でマウスボタンを押したままマウスを動かすと、選択をドラッグできる。このイベントに対するデフォルトアクションは、選択を他のエレメントにコピーする準備を行うことである。このデフォルトアクションをキャンセルするには、falseを返す。

LoadイベントとReadystateイベント

ドキュメントの現在の状態を示すイベントは、onreadystatechange、onload、onunloadイベントの3つである。

ドキュメントが初期設定からインタラクティブに、そしてインタラクティブから読み込まれた状態にと変更されると、onreadystatechangeイベントが発生する。ユーザーがアンカーやエレメントをスクロールしたりクリックした直後に、ドキュメントはインタラクティブとなる。すべてのコンテントがダウンロードされると、ドキュメントはonloadとなる。

ドキュメントが読み込まれ、ページの全エレメントが完全にダウンロードされると、onloadイベントが発生する。ドキュメントがアンロードされる（他のドキュメントにナビゲートするとき）前に、onunloadイベントが発生する。

onloadイベントとonunloadイベントへのコードの指定は、BODYオブジェクトで行う。しかし、実際これらのイベントはwindowオブジェクトで生じる。従って、<SCRIPT FOR= EVENT=>構文でonloadイベントを処理するとき、<SCRIPT FOR=myBody Event=onLoad>構文では失敗する。この構文の代わりに、<SCRIPT FOR=window Event=onLoad>構文を使わなくてはならない。

その他のイベント

ドキュメントで使用できる有効なイベントは数多くある。それぞれのリストについては、DHTMLリファレンスのイベントを参照すること。

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.