Document Object Model
Written 1/4/01
6. Event(2)
Event オブジェクトのプロパティを紹介します。 ここでもできるだけクロスブラウザをこころがけています。
type
type プロパティはイベントのタイプを文字列で表します。 例えば、 onclick なら "click" と返します。
  <INPUT TYPE="button" VALUE="押してね☆" ONCLICK="alert(event.type)">
 
イベントが起こったオブジェクトを得る
IE では srcElement プロパティがオブジェクト (へのアドレス)を返します。
ネスケでは target プロパティがオブジェクトを表す文字列を返します。 こんな感じです。
  <input type="button" name="btn1" value=押してね☆" onclick'test2(e);'>
 
こんなものを返されてどうするんだという話もありますが、 とりあえず name プロパティを拾っておきましょう。
  function test2(e) {
    if(document.all)                    //IE4 or later
        alert(e.srcElement.name);
    else if(document.layers) {          //ネスケ4
        var str = String(e.target);
        str.match(/name=\"([^\"]+)\"/); //正規表現で拾う
        alert(RegExp.$1);
    }
  }
 
キーを検出する
IE では keyCode が押されたキーのコードを返します。
  <INPUT TYPE="text" ONKEYDOWN="alert(event.keyCode); return false">
 
上のテキストボックスをフォーカスして何かキーを押してください。
onkeydownonkeyup では基本的に押されたキーの Unicode を返します。
Ctrl でも Alt でもどんなキーもコードを返します。
テンキーは別のコードを返します。
アルファベットは小文字を打っても大文字のコードを返します。 すなわち、たぶん 'a' と 'A' のどちらを入力しようとしているのか判別できません。

  <INPUT TYPE="text" ONKEYPRESS="alert(event.keyCode); return false">
 
onkeypress では基本的に入力されようとしている文字のコードを返します。
アルファベットは小文字も大文字もそのコードを返します。
% や & などもそのコードを返します。
テンキーでも同じ文字は同じコードを返します。
Tab や特殊キーは キーイベントを検出できません。

ネスケ では which が押されたキーのコードを返します。

  <INPUT TYPE="text" ONKEYDOWN="alert(event.which); return false">
 
ネスケでは IE の onkeypress の場合と同じように入力されようとしている文字のコードを返します。
修飾キーを検出する
イベントが起きたときに同時に Alt などのキーが押されたかどうかを判別するには、 IE では altKeyctrlKeyshiftKey プロパティを用います。
そのキーが押されていれば対応するプロパティが true を、 そうでなければ false を返します。

ネスケでは modifiers プロパティを用います。 これは Alt などのキーが押された場合、Event.ALT_MASK、 Event.ALT_MASK、Event.ALT_MASK のフラグが立つので、例えば Alt キーが押されたか判別するには

 (e.modifiers & Event.ALT_MASK) != 0
 
true なら Alt キーが押されていたことになります。
  function test3(e) {
    if(document.all)            //IE4 or later
        alert("Alt:" + e.altKey + " Ctrl:" + e.ctrlKey
                                            + " Shift:" + e.shiftKey);
    else if(document.layers)    //ネスケ4
        alert("Alt:" + ((e.modifiers & Event.ALT_MASK) != 0)
                + " Ctrl:" + ((e.modifiers & Event.ALT_MASK) != 0)
                + " Shift:" + ((e.modifiers & Event.ALT_MASK) != 0));
  }
 
上のボタンを押してください。 そのとき同時に Alt キーなどが押されていたかどうかを表示します。
押されたマウスボタンの検出
IE では button プロパティでどのマウスボタンが押されたか検出できます。

buttonvalue
default0
left1
right2
middle4

複数のボタンが同時に押された場合、返ってくる値は足しあわせになるらしいです。

  <DIV STYLE="color:darkorange" ONMOUSEDOWN="alert(event.button); return false">
   押してね☆
  </DIV>
 
押してね☆

上の「押してね☆」をクリックすると押したボタンに応じた値が表示されます。
上では onmousedown を拾っていますが、 onclick ではうまくいかないようです。 onmouseup ではいちおう値が表示されます。

ネスケでは which プロパティで押されたボタンを検出します。

buttonvalue
default0
left1
right2
middle3

  function test4() {
    if(document.onclick)
        document.onclick = "";
    else
        document.onclick = test5;
  }
 
  function test5(e) {
    alert(e.which);
    return false;
  }
 
下のボタンを押すと test4 が走り、document が test5 に結びつきます。 適当なところを押すと test5 が走ります。
イベントが起きた場所の検出
screenXscreenY はスクリーンの左上を基準にした座標を返します。
  function test6() {
    if(document.onclick)
        document.onclick = "";
    else
        document.onclick = test7;
  }
  
  function test7(e) {
    if(document.all)
        alert("(" + event.screenX + "," + event.screenY + ")");
    else if(document.layers)
        alert("(" + e.screenX + "," + e.screenY + ")");
    return false;
  }
 
下のボタンを押すと test6 が走り、document が test7 に結びつきます。 適当なところを押すと test7 が走り座標が表示されます。
これに対し、IE の clientX、 ネスケの pageX などはページ内での座標を返します。 フレームがあれば個々のフレーム内での座標となります。
  function test8() {
    if(document.onclick)
        document.onclick = "";
    else
        document.onclick = test9;
  }
  
  function test9(e) {
    if(document.all)
        alert("(" + event.clientX + "," + event.clientY + ")");
    else if(document.layers)
        alert("(" + e.pageX + "," + e.pageY + ")");
    return false;
  }
 
下のボタンを押すと test8 が走り、document が test9 に結びつきます。 適当なところを押すと test9 が走り座標が表示されます。
IE の x、 ネスケの x または layerX などはたぶんネスケで LAYER と解釈できる DIV 内にある場合は そのDIV内での座標を返します。
  <DIV STYLE="position:relative;color:darkorange"
        ONMOUSEDOWN="alert(event.y); return false">
   押してね☆
  </DIV>
 
押してね☆

上の「押してね☆」を押すとその DIV 内での y座標が表示されます。 ネスケではうまく動きません。
その他の場合 x などは clientX などと同じです。

Back