| |
今回はインタラクティブなスクリプトを作成する上で必須と思われる イベントについての互換性について見てみましょう。
キーやマウスイベントの指定方法には HTML4 で規定されているタグの属性として指定する方法と、 DOM Level2 で規定されているスクリプトで直接指定する方法の２種類があります。
これらの方法は、種類としては従来からあるのですが、 HTML4 では殆ど全てのタグに記述できますし、 DOM Level2 の仕様でも基本的に全ての Node と Nodeのサブクラス のオブジェクトに実装されることになっていて、適用範囲が広くなっているのが特徴です。
◆タグで指定する方法
Mozilla での記述方法は IE4/5 と同様ほとんどのタグで記述できることを除いて
NN4 と同様に記述できます。
例えば, CSS の hover と同様の効果をスクリプトで実現するならこんな感じです。
<strong onmouseover="this.style.color='red'"
onmouseout ="this.style.color="black'">Hover</strong>
また、NN での IE互換用の奇妙な記述( 'event'指定のこと ^^;)も有効です。
<strong onmouseover="changeColor(this,event,'red');"
onmouseout ="changeColor(this,event,'black');">Hover</strong>
※ ちょっと気になるのは、 例えば changeColor関数内で event.constructor とすると IE4 では 'null', IE5 では 'undefined', NN4 では 'Event', Mozilla では 'KeyEvent' となることですけどね(笑)。
この方法は NN でイベント指定できないタグに指定する限り、 無視されるので、クロスな環境でも問題が発生しにくい特徴があります。
◆スクリプトで指定する方法
W3C DOM Level2 のイベントモデルではイベントハンドリングは
EventTarget オブジェクトにある addEventListener 関数を使用することになっています。
つまり、こんな風に記述します。
<div id="d1"></div>
:
document.getElementById('d1').addEventListener('mouseover',func,true);
ハンドラでは NN4 と同様イベントオブジェクトを引数として受け取り、
子要素を含めてハンドラを登録したオブジェクト内で発生したイベントが通知されます。
しかし、現状の Mozilla( 0.6, NN6 )ではオブジェクトに文字列( TextNode )があると
文字列上のマウスイベントが通知されません( 仕様かバグかは不明 )。
この意味では、この方法はタグで指定する方法と同じではありません。
では、同じ方法はないかというと、
従来と同じようにオブジェクトにマウスイベントとして指定する方法があります。
document.getElementById('d1').onmouseover = func;
ここで注意して欲しいのは、 'd1'( HTMLDivElement )には onmouseover と言う
プロパティやメソッドは W3C DOM Level2 には定義されていないことです。
これらのイベントハンドラの定義が HTMLDivElement の属性値ではないことは
上の記述を次のように書き直してみるとわかります。
var div=document.getElementById('d1');
div.setAttribute('onmouseover',func);
両者は一見等価な式のように見えますが、後者の記述では動作しません。
そこで、Mozilla の IDL( M18以降ね ^^; )を参照すると、
どうやらこれらのプロパティは WindowEventOwner なる謎(笑)のオブジェクトで
定義されているようです。
つまり、onmouseover などは通常の属性値ではなく
NN4 の watch式のような働きをしているようです。
( 本来ならば、setAttributeメソッド内でも同様の動作をしても良いと思うのですが... ^^; )
現在( 2001年 1月 )W3C DOM Level2 の HTML 部分が Working Draft レベルに
格下げされている理由が互換性の再検討であったことを思い出すと、
これらのプロパティ(？)も追加され、Mozilla での定義も変わるかもしれません。