フォームやリンクにイベントハンドラを登録します。
「kl_addhandler()」を使ったイベントハンドラの指定
以下のフォームは addボタンにイベントハンドラが設定されています。
ボタンを押すとテキストボックスに"Hello"が追加されていきます。
<input type=button name=b1 onclick="this.form.t1.value+='Hello! ';" value='add'>
このaddボタンのonclickハンドラに
現在のテキストボックスの中身をalert()で表示する関数を追加してみます。
上記を実行後 addボタンを押すと既定ハンドラと追加したものの両方が
動くことが分かります。
既定のハンドラが上書きされないので コード管理がラクになります。
よく使われるイベントハンドラと登録先
以下に よく使われるイベントハンドラとその一般的な登録先を列挙します。
【よく使われるイベントハンドラ：リンク、フォーム向け】
| イベントハンドラ名 |
登録先オブジェクト |
該当イベント |
| onfocus |
フォーム各種 |
フォーカスされた |
| onblur |
フォーム各種 |
フォーカスが外れた |
| onmousedown |
フォーム各種 |
マウスボタンが押された |
| onmouseup |
フォーム各種 |
押されたマウスボタンが押し戻された |
| onclick |
リンク、フォーム各種 |
クリックが実行された (マウスボタンが上げられる瞬間発生) |
| onmouseover |
リンク |
マウスがリンク領域に重なった |
| onmouseout |
リンク |
マウスがリンク領域から外に出た |
| onkeydown |
テキスト系フォーム |
キーが押された(一度のみ呼ばれる) |
| onkeypress |
テキスト系フォーム |
キーが押された状態(押されている間 何度も呼ばれる) |
| onkeyup |
テキスト系フォーム |
キーが押された状態から戻された(一度のみ呼ばれる) |
| onselect |
テキスト系フォーム |
テキストが(マウスドラッグ等で)選択された |
| onchange |
フォーム各種 |
値が変わった |
| onsubmit |
<form>タグ |
フォームの送信される(送信ボタンが押された) |
| onreset |
<form>タグ |
フォームのResetボタンが押された |
Netscape4以外では イベントハンドラの登録は 上記以外にも殆どのタグで可能です。
またハンドラ関数の返り値を「false」とするとブラウザのデフォルトの動作を
押さえることができます。
例えば リンクや送信ボタン クリック時の動作をそのまま実行するか否か
JavaScriptから制御できます。
利用可能なイベントハンドラを調べる
イベントハンドラは他にも沢山有り下記スクリプトで調べられます。
以下はIE6での実行結果です。
上のスクリプトを実行したら書き換えられます。
補足
一般に「for(var i in e)...」で要素「e」の各種属性を取得できます。
上のスクリプトの動作状況ですが
Netscape,Mozillaはスクリプトで指定したハンドラのみ得られます。
Opera6,7では殆ど属性を得られないため何も表示されません。
一方WinIE4-6は 設定していないハンドラも含め多数表示されます。
| onactivate | null |
| onafterupdate | null |
| onbeforeactivate | null |
| onbeforecopy | null |
| onbeforecut | null |
| onbeforedeactivate | null |
| onbeforeeditfocus | null |
| onbeforepaste | null |
| onbeforeupdate | null |
| onblur | null |
| oncellchange | null |
| onclick | null |
| oncontextmenu | null |
| oncontrolselect | null |
| oncopy | null |
| oncut | null |
| ondataavailable | null |
| ondatasetchanged | null |
| ondatasetcomplete | null |
| ondblclick | null |
| ondeactivate | null |
| ondrag | null |
| ondragend | null |
| ondragenter | null |
| ondragleave | null |
| ondragover | null |
| ondragstart | null |
| ondrop | null |
| onerrorupdate | null |
| onfilterchange | null |
| onfocus | null |
| onfocusin | null |
| onfocusout | null |
| onhelp | null |
| onkeydown | null |
| onkeypress | null |
| onkeyup | null |
| onlayoutcomplete | null |
| onlosecapture | null |
| onmousedown | null |
| onmouseenter | null |
| onmouseleave | null |
| onmousemove | null |
| onmouseout | null |
| onmouseover | null |
| onmouseup | null |
| onmousewheel | null |
| onmove | null |
| onmoveend | null |
| onmovestart | null |
| onpage | null |
| onpaste | null |
| onpropertychange | null |
| onreadystatechange | null |
| onreset | null |
| onresize | null |
| onresizeend | null |
| onresizestart | null |
| onrowenter | null |
| onrowexit | null |
| onrowsdelete | null |
| onrowsinserted | null |
| onscroll | null |
| onselectstart | null |
| onsubmit | null |
ホーム 