Webの勉強

Web系の作業で得た知識を備忘録として記録。間違ったていたら、ごめんなさい。

eventオブジェクト

モダンブラウザ間は、DOMオブジェクトに関する実装の違いはありません。 しかし、「eventオブジェクト」と「windowオブジェクト」には実装の違いが存在します。

ブラウザは以下3つのグループにわかれます。 ①IEMozilla系→Netscape Navigator,FirefoxOpera,Safari

取得したイベントから値をとり出す方法の違いは以下の通りです。

IEの場合  window.event.プロパティ

Mozilla系の場合  変数.プロパティ

Opera,Safariの場合  両方とも対応できている(?)

それぞれのブラウザで使用できるプロパティは以下の通りです。 ③は、①と②の両方のプロパティを使用可能です。

Opera/Safari
IE Mozilla系(Netscape Navigator/FireFox)
プロパティ 解説 備考 プロパティ 解説 備考
type イベントのタイプ type イベントのタイプ
layerX イベントが発生したレイヤー上のX座標(ピクセル Netscape Navigator 4.Xのみ
layerY イベントが発生したレイヤー上のY座標(ピクセル Netscape Navigator 4.Xのみ
screenX イベントが発生したスクリーン上のX座標(ピクセル screenX イベントが発生したスクリーン上のX座標(ピクセル
screenY イベントが発生したスクリーン上のY座標(ピクセル screenY イベントが発生したスクリーン上のY座標(ピクセル
pageX 表示しているページの左上からの座標を取得
pageY 表示しているページの左上からの座標を取得
clientX 現在ブラウザで表示している領域の左上からの座標を取得。 スクロールバーがでなければ、pageXと同じ
clientY 現在ブラウザで表示している領域の左上からの座標を取得。 スクロールバーがでなければ、pageYと同じ
offsetX イベントが発生した要素上のX座標(ピクセル
offsetY イベントが発生した要素上のY座標(ピクセル
keyCode マウスボタンが押されたり、押されたキーのASCIIの値 keyCode マウスボタンが押されたり、押されたキーのASCIIの値 Netscape 6.0以降
which マウスボタンが押されたり、押されたキーのASCIIの値

  座標の取得プログラムです。 ClientとPageはスクロールバーをだすと値がちがってきます。

See the Pen QqLoKV by satsuki mori (@satsuki) on CodePen.

  プロパティもまぎらわしいですね。。

screenX,screenY→スクリーン(モニター)上の座標を取得

clientX,clientY(PageX,PageY)→現在ブラウザで表示している領域の左上からの座標を取得。

 

参考サイト

codezine.jp