レイヤーにイベントハンドラを登録します。
HTMLタグ内でのハンドラ指定
一般的には
<div onmouseover="処理内容">...</div> などと書けます。
しかしNetscape4の場合は<div>内に書いたハンドラ指定は無視されます。
<layer>タグ内に書くと モノによっては反映されます。
onmouseover, onmouseoutはOKですが
onmousedown, onclick, onmousemove, onmouseupなどはJavaScriptで
指定する必要があります。
JavaScriptによるハンドラ指定
以下のレイヤーにJavaScriptで各種ハンドラを指定してみましょう。
レイヤー内の各種イベントが発生するたびにステータスバーに
イベントの種類を表示しています。
上の実行ボタンを押した後 マウスポインタをレイヤーの上に移動したり
外に出したり、クリックを実行してみてください。
レイヤー「lay1」です。
通常マウスの「onmouseup」と「onclick」の発生するタイミングは同じで
マウスボタンが押し上げられる瞬間です。
上のサンプルで「click」しか表示されない場合は「mosuedown」後
マウスポインタを少しずらしてから「mouseup」してみて下さい。
「click」の代わりに「mouseup」が表示され 両方が動作していると分かります。
Netscapeに対応したい場合の注意点
NS4への対応は一筋縄には行きません。幾つか気が付いたことを書きます。
| - |
<layer>タグか スタイルシートでposition:absoluteを指定した<div>タグでのみ動作。
Netscape4以外では <div>の他<td>等殆どのタグでイベントハンドラ設定可。
|
| - |
レイヤー内に画像やFormがある場合はそれらにも個別にハンドラ関数を指定。
各タグにname=...指定があると不要な場合がありますが 動的に作成したレイヤーではダメです。確実に動作させるには個別に指定しましょう。 |
| - |
documentなど上位Objectにもハンドラ関数を指定している場合は
イベントが伝達されない。上位の関数でrouteEventを実行する。
if(KL_NS4){ if(document.routeEvent(e)==false) return false;}
|
実際の応用例については レイヤーのドラッグ設定・解除：kl_drag_set()
、レイヤークリックで手前に移動：kl_raise_set()
を見てみてください。
上のレイヤーをドラッグ可能にしてみましょう。
レイヤーには新たにonmousedownハンドラが設定されます。
レイヤーをクリック＆ドラッグしてステータスバーの出力を見ると
前のハンドラも上書きされずに動作していることが分かります。
「kl_drag_set(lay1)」を実行して「lay1」をドラッグ可能にする
利用可能なイベントハンドラを調べる
イベントハンドラは他にも沢山有り下記スクリプトで調べられます。
以下は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 |
| onresize | null |
| onresizeend | null |
| onresizestart | null |
| onrowenter | null |
| onrowexit | null |
| onrowsdelete | null |
| onrowsinserted | null |
| onscroll | null |
| onselectstart | null |
ホーム