はじめに
ブラウザの種類やバージョン、おのおのブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。この連載では、クロスブラウザスクリプトを実現する方法について順を追って解説してきています。
クロスブラウザスクリプトを実現するためには、様々な方法があります。これまでの連載では、ブラウザの種類やバージョンを判断し、そのブラウザがサポートしているスクリプトを実行する方法を解説してきました。また、それ以外の方法として、実行するスクリプトをブラウザがサポートしているかどうか調べ、それに合わせて用意したスクリプトを実行する方法なども説明してきました。実際にクロスブラウザスクリプトを作成する時には、それらの方法を単独あるいは組み合わせて作っていくことになります。
本来のJavaScriptの理想的な姿としては、JavaScriptをサポートしたブラウザであれば、1つのスクリプトで同じように動くべきなのでしょう。しかし、ブラウザによって細かな実装の違いがあるために、今まで解説してきたようなクロスブラウザスクリプトのテクニックが必要となってくるのです。
実は、Internet ExplorerやFirefox、Opera、Safariなど一般的に使われているブラウザの現在最も普及しているバージョンでは、積極的にDOMがサポートされており、実装上の違いはそれほど多くありません。それでも、JavaScriptの中で比較的よく使われている「eventオブジェクト」と「windowオブジェクト」には多くの実装の違いが存在します。今回は、eventオブジェクトのブラウザによる実装の違いについて解説したいと思います。
今回も前回までに解説してきたことをもとに進めていきます。前回までの内容も併せて参照するようにしてください。
過去の記事
- 第1回：ブラウザによるイベントの取り扱いの違いを吸収する
- 第2回：JavaScriptを使ってクライアントのOSに応じた処理を行う
- 第3回：ユーザエージェントからブラウザの種類やバージョンを判断する
- 第4回：ブラウザに合わせたスクリプトを実行する
- 第5回：ディスプレイサイズに合わせてブラウザの新しいウィンドウを開く
- 第6回：スタイルシートやレイヤーを操作する
- 第7回：ブラウザがサポートしているスクリプトを判断する
- 第8回：ブラウザがサポートしているスクリプトを判断する 2
eventオブジェクトの用法
Internet Explorerと、Netscape NavigatorやFirefoxを含めたMozilla系ブラウザでのeventオブジェクトの実装の違いについては、これまでも何度か解説してきました。また、それに対するOperaやSafariの対応についても説明を重ねてきました。ここでもう一度、eventオブジェクトの用法をまとめておきましょう。
eventオブジェクトを使ってオブジェクトからイベントを取得する方法は、Internet Explorer、Mozilla系ブラウザともに同じで次のような用法となります。
イベントを取得するオブジェクト.取得するイベントタイプ
= 関数 | スクリプト
しかし、取得したイベントから値をとり出す用法には次のような違いがあります。
window.event.プロパティ
変数.プロパティ
eventオブジェクトがサポートしているスクリプト
では、eventオブジェクトが実際にどのようなスクリプトをサポートしているかを見ていきましょう。Internet ExplorerおよびMozilla系ブラウザがサポートしている主なスクリプトは次の通りです。
| プロパティ | 解説 | 備考 |
| type | イベントのタイプ | |
| screenX | イベントが発生したスクリーン上のX座標（ピクセル） | |
| screenY | イベントが発生したスクリーン上のY座標（ピクセル） | |
| clientX | イベントが発生したクライアント上のX座標（ピクセル） | pageXと同等 |
| clientY | イベントが発生したクライアント上のY座標（ピクセル） | pageYと同等 |
| offsetX | イベントが発生した要素上のX座標（ピクセル） | |
| offsetY | イベントが発生した要素上のY座標（ピクセル） | |
| keyCode | マウスボタンが押されたり、押されたキーのASCIIの値 | |
| メソッド | ||
| 無し | ||
| イベント | ||
| 全てのイベントタイプ | ||
| プロパティ | 解説 | 備考 |
| type | イベントのタイプ | |
| layerX | イベントが発生したレイヤー上のX座標（ピクセル） | Netscape Navigator 4.Xのみ |
| layerY | イベントが発生したレイヤー上のY座標（ピクセル） | Netscape Navigator 4.Xのみ |
| screenX | イベントが発生したスクリーン上のX座標（ピクセル） | |
| screenY | イベントが発生したスクリーン上のY座標（ピクセル） | |
| pageX | イベントが発生したページ上のX座標（ピクセル） | clientXと同等 |
| pageY | イベントが発生したページ上のY座標（ピクセル） | clientYと同等 |
| which | マウスボタンが押されたり、押されたキーのASCIIの値 | |
| keyCode | マウスボタンが押されたり、押されたキーのASCIIの値 | Netscape 6.0以降 |
| メソッド | ||
| 無し | ||
| イベント | ||
| 全てのイベントタイプ | ||
OperaとSafariはInternet Explorer、Mozilla系ブラウザ両方のスクリプトをサポートしています。試しにInternet Explorer向けの用法とプロパティのみを使ったサンプル、Mozilla系ブラウザ向けの用法とプロパティのみを使ったサンプルをそれぞれ作り、いろいろなブラウザで実行してみましょう。
このスクリプトは、ブラウザのコンテンツ表示領域内で「マウスボタンが押された時」をイベントとしてとらえます。そして、発生したイベントのタイプ、イベントが発生した左端からの位置（X座標）や上からの位置（Y座標）などの情報を、警告用のダイアログボックスに表示しています。なお、このスクリプトは「ブラウザによるイベントの取り扱いの違いを吸収する」で紹介したスクリプトを基にしているので併せて参照してください。
Internet Explorerの場合
まずは、Internet Explorer用のスクリプトです。
<script type="text/javascript"> <!-- function eve() { alert ( "イベントのタイプ：" + window.event.type + "\n" + "イベントが発生したスクリーン上のX座標：" + window.event.screenX+ "\n" + "イベントが発生したスクリーン上のY座標：" + window.event.screenY + "\n" + "イベントが発生したウインドウ上のX座標：" + window.event.clientX + "\n" + "イベントが発生したウインドウ上のY座標：" + window.event.clientY + "\n" + "イベントが発生した要素上のX座標：" + window.event.offsetX + "\n" + "イベントが発生した要素上のY座標：" + window.event.offsetY ) return true; } document.onmousedown = eve; //--> </script>
Mozilla系ブラウザの場合
次にNetscape Navigator用のスクリプトです。
<script type="text/javascript"> <!-- function eve(e) { alert ( "イベントのタイプ：" + e.type + "\n" + "イベントが発生したスクリーン上のX座標：" + e.screenX+ "\n" + "イベントが発生したスクリーン上のY座標：" + e.screenY + "\n" + "イベントが発生したウインドウ上のX座標：" + e.pageX + "\n" + "イベントが発生したウインドウ上のY座標：" + e.pageY ); return true; } document.onmousedown = eve; //--> </script>
これにより、Internet ExplorerとMozilla系ブラウザはそれぞれのブラウザ用のスクリプトのみが実行でき、Opera、Safariは両方のブラウザ用のスクリプトが実行できることが分かると思います。
それでは次に、eventオブジェクトがサポートしているスクリプトの注意点を詳しく見ていきましょう。
