ブラウザごとのeventオブジェクトの違いを理解する

クロスブラウザスクリプト作成時に問題となる、eventオブジェクトの用法とプロパティ

キーの値を提供するプロパティ

　Mozilla系ブラウザのeventオブジェクトには、イベントが発生した時のキーのASCII値を持つプロパティとして、「whichプロパティ」と「keyCodeプロパティ」の2種類があります。このうち、keyCodeプロパティはDOMの仕様にそったプロパティとなります。それに対し、whichプロパティはDOMの規格化が完了する前の、どちらかといえばMozilla系ブラウザ独自仕様のプロパティと言えます。

　keyCodeプロパティはNetscape 6.Xからサポートしています。また、eventオブジェクトはNetscape Navigator 4.0からのサポートとなります。つまり、eventオブジェクトをサポートしているMozilla系ブラウザのうち、keyCodeプロパティをサポートしていないのは、バージョン 4.XのNetscape Navigatorのみとなります。このことから、Netscape Navigator 4.Xを対象としたスクリプトを作成する場合以外は、keyCodeプロパティを使ってキーの値を取得した方がいいでしょう。

　次のサンプルは、onkeyupによってキーボードのキーが押され「元に戻った時」をイベントとしてとらえ、キーの値を警告用のダイアログボックスに表示しています。

キーの値を取得する：Internet Explorer用

　まずは、Internet Explorer用のスクリプトです。

Sample/Sample_4.html（抜粋）

<script type="text/javascript">
<!--
function eve() {
    alert ( String.fromCharCode(window.event.keyCode)
    + "：キーが押されました");
    return true;
}
document.onkeyup = eve;
//-->
</script>

Internet Explorerでの実行結果

Operaでの実行結果

Safariでの実行結果

キーの値を取得する：Mozilla系ブラウザ用

　次にNetscape Navigator用のスクリプトです。

Sample/Sample_5.html（抜粋）

<script type="text/javascript">
<!--
function eve1(e) {
    alert ( String.fromCharCode(e.keyCode) + "：キーが押されました");
    return true;
}
document.onkeyup = eve1;
//-->
</script>

Firefoxでの実行結果

Operaでの実行結果

Safariでの実行結果

　Internet Explorer用のサンプルは、Opera、Safariでも正常に動作します。また、Mozilla系ブラウザ用のサンプルは、Netscape 6.0以降のMozilla系ブラウザおよび、Opera、Safariで正常に動作します。

　両サンプルとも、キーの値はkeyCodeプロパティを使って取得しています。keyCodeプロパティの値はASCIIのコード番号なので、サンプルではASCIIコードを英数字に変換するStringオブジェクトのfromCharCodeメソッドを使って英数字に変更し、警告用のダイアログボックスに表示しています。

　また、イベントの取得にonkeydownを使った場合、Mozilla 1.0やNetscape 7など一部のブラウザで、上手く値が取得できない場合があります。この問題を回避するために、サンプルではイベントタイプにonkeyupを使用しています。

まとめ

　今回は、クロスブラウザスクリプトを作成する場合に問題となる、ブラウザの種類やバージョンによるJavaScriptの実装の違いとしてeventオブジェクトを見てきました。Internet ExplorerとMozilla系ブラウザ間の用法や、サポートしているプロパティの中で、eventオブジェクトは最も大きな違いを持つと言えるでしょう。