|
|
| イベントの処理 |
- 現在のところ、作成されたオブジェクトからonclickや、onmouseover、onmouseoutは、同じように動作しますが、
Windowでクリックされた位置の取得がMicrosoftInternetExplorerとNetscapeNavigator が大きく違い、
どうしても１つのスクリプトで記述することができません。しかしながらCGIで使用する場合は、
ブラウザを取得して作成するDynamicHTMLを変える事で対応する事が可能です。
本章では、マウスイベントを中心にブラウザのイベントハンドラーを学習します。
- onclick
もっとも基本的なイベントで、マウスの左ボタンを1度押して、離した時発生します。
押したままだと発生しません。押した位置と離した位置がほぼ同じ場合がクリックです。
押しただけではonmousedownが発生します。
<p onclick="alert('マウスがクリックされました。')">ここをクリックしてください</p>
<input type=button
value=Button1
onclick="alert('ボタンがクリックされました。')">
|
|
- onmousedown
マウスのボタンが押された時発生します。
onclickが押して、離した時発生するのに対し、onmousedownは、ボタンを押した瞬間に発生します。
<p onmousedown="alert('マウス押されました。')">ここを押してください</p>
<input type=button
value=Button1
onmousedown="alert('ボタンが押されました。')">
|
|
- onmouseup
マウスのボタンが離された時発生します。
他の位置で押された場合でも、離されたオブジェクトで発生します。
<p onmouseup="alert('マウスが離されました。')">ここで離す</p>
<input type=button
value=Button1 onmouseup="alert('ボタンで離されました。')">
|
|
- onmouseover
マウスカーソルがオブジェクト上に移動した時発生します。
<p onmouseover="alert('テキスト領域です。')">ここはテキスト領域</p>
<input type=button
value=Button1
onmouseover="alert('ボタン領域です。')">
|
|
- onmouseout
マウスカーソルを一度オブジェクト上に置き、離れた時発生します。
<p onmouseout="alert('テキストから離れました。')">ここはテキスト領域</p>
<input type=button
value=Button1
onmouseout="alert('ボタンから離れました。')">
|
|
onmouseoverとonmouseoutで動的にボタンの名称を変更したり、画像を変更する事もできます。
<input type=button value=ボタンは押せません
onmouseover="this.value='ボタンが押せます'"
onmouseout="this.value='ボタンは押せません'">
<p>
<img src='images/Papio.gif'
onmouseover="this.src='images/Papio2.gif'"
onmouseout="this.src='images/Papio.gif'">
|
|
ご覧のようにイベントそのものにブラウザによる違いはほとんどありません。
多少、NetscapeNavigatorのタイミングが遅いということは有ります。
- マウスが押された位置を取得
これが問題の座標の取得です。
IEはeventオブジェクトで簡単に取得できるのですが、
<SCRIPT LANGUAGE=javascript
FOR=document
EVENT=onmousedown>
<!--
document_onmousedown();
function document_onmousedown() {
var x=event.clientX;
var y=event.clientY;
alert('X = '+x+'\nY = '+y);
}
//-->
</SCRIPT>
<p align=center>ウィンドウ上でマウスをクリックしてください。</p>
|
|
NetscapeNavigatorではイベント発生時に何も渡さず関数を呼び出します。
<SCRIPT LANGUAGE=javascript>
<!--
window.onmousedown=document_onmousedown;
function document_onmousedown(Ev)
{
var x=Ev.clientX;
var y=Ev.clientY;
alert('X = '+x+'\nY = '+y);
}
//-->
</SCRIPT>
<p align=center>ウィンドウ上でマウスをクリックしてください。</p>
|
|
マウスが押された座標が必要な場合は、CGIで
if ($ENV{'HTTP_USER_AGENT'} =~ /MSIE/i)
{ $IeFlag = 1; }
の用にブラウザのフラグを設定してコードを変更します。
- onchange
ここからはフォームに関するイベントです。
onchangeイベントは、フォームのテキストボックスや、テキストエリアの内容が変更された時発生します。
<input type=text
name=text1
onchange="alert('テキストが変更されました。');">
<p>テキストボックスに何か入力してください。</p>
|
|
通常は、テキストを変更後フォーカスが移動した時発生します。
- onfocus
フォームのテキストボックスや、テキストエリアにカーソルが移動した時発生します。
テキスト１：
<input type=text
name=text1
onfocus="alert('これはテキスト１です。');">
<p>
テキスト２：
<input type=text
name=text2
onfocus="alert('これはテキスト２です。');">
|
|
- onblur
onfocusの逆の動作をします。一度アクティブになり、フォーカスを失う時発生します。
カーソルをテキストボックスからテキストボックスに移動してください。<p>
テキスト１：
<input type=text
name=text1 onblur="alert('テキスト１から離れました。');">
<p>
テキスト２：
<input type=text
name=text2 onblur="alert('テキスト２から離れました。');">
|
|
|
|
|
