技 巧 鍵 盤 ─ KeyNavi:キーボードを活用してホームページを快適に─    
キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] レイヤーにイベントハンドラを登録 ・サイトマップ [Shift-S]

■ レイヤーにイベントハンドラを登録

レイヤーにイベントハンドラを登録します。

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は 設定していないハンドラも含め多数表示されます。

onactivatenull
onafterupdatenull
onbeforeactivatenull
onbeforecopynull
onbeforecutnull
onbeforedeactivatenull
onbeforeeditfocusnull
onbeforepastenull
onbeforeupdatenull
onblurnull
oncellchangenull
onclicknull
oncontextmenunull
oncontrolselectnull
oncopynull
oncutnull
ondataavailablenull
ondatasetchangednull
ondatasetcompletenull
ondblclicknull
ondeactivatenull
ondragnull
ondragendnull
ondragenternull
ondragleavenull
ondragovernull
ondragstartnull
ondropnull
onerrorupdatenull
onfilterchangenull
onfocusnull
onfocusinnull
onfocusoutnull
onhelpnull
onkeydownnull
onkeypressnull
onkeyupnull
onlayoutcompletenull
onlosecapturenull
onmousedownnull
onmouseenternull
onmouseleavenull
onmousemovenull
onmouseoutnull
onmouseovernull
onmouseupnull
onmousewheelnull
onmovenull
onmoveendnull
onmovestartnull
onpagenull
onpastenull
onpropertychangenull
onreadystatechangenull
onresizenull
onresizeendnull
onresizestartnull
onrowenternull
onrowexitnull
onrowsdeletenull
onrowsinsertednull
onscrollnull
onselectstartnull




【JavaScript@Keynavi.Net : 一般イベント処理編 】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。

  - マウス位置取得:kl_mousex,y()
  - Focus/Click先の要素を取得:kl_target()
  - イベントハンドラの登録:kl_addhandler()
  - ページ全体に対するイベントハンドラの登録
  - レイヤーにイベントハンドラを登録
  - フォームやリンクにイベントハンドラを登録

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] レイヤーにイベントハンドラを登録 ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─