IE8も正式リリースされた事ですしIE8の動きを調べてみたいという動機から、昔Web開発で調査につかっていた色々な物を試している所です。
今回は昔作ったIEのイベント取得ツールを、このブログへ移植してみましたので紹介します。
eventオブジェクトってどのタイミングで何の情報を取得できるか非常に分かり辛いんですよね。
今回の[IE Key Eventキャプチャー]は、IEのキーイベント(onkeydown , onkeymouse , onkeyup)やマウスイベント(onmousedown , onmouseup , onmousemove , onmousewheel)発生時に取得できるeventオブジェクトのプロパティ値を一覧するツールとなります。
ま~文章で読んでも分かりづらいと思いますので、次のキャプチャイメージを見てください。
ブログ上部の[IE Key Eventキャプチャ]を、クリックすると移植したツールが表示されます。
↑この画面は、[A]キーを押した状態となります。
分かりやすいのは、keyCodeに表示されている値で[A]キーのキーコードにあたる"65"が表示されています。
(この値をJavaScriptで参照するには、onkeydownのタイミングでevent.keyCodeを参照します。)
他には、typeにイベント情報は"keydown"イベントである事や、マウスカーソルのX座標を表すoffsetXやclientXの値と、その違いを参照できる事が分かります。
キャプチャするイベントの設定を変更したい場合は、イベント設定フィールドセット内のボタンをクリックする事で変更できます。
又、画面内で赤字で表示される値は、直前にキャプチャした値と異なる事を示しています。
ここまで理解して頂ければ、後は動かしてみた方が分かりやすいかと思いますので、ブログ上部の[IE Key Event キャプチャ]をクリックし実際に動かして見てください。(IE6,IE7,IE8で動作を確認しています。)
単にキーボードのキー番号を取得したいといった場合や、eventオブジェクトの流れ(onkeydown , onkeypress , onkyeupの発生順等)を調べたいといった場合など、eventオブジェクトに関する様々な情報を細かく取得でき、面白いと感じる人もいるんじゃなないかな~と思っています。
本当は、IE8でのeventオブジェクトの変化を見つけたくて弄り始めたのですが、ぱっと見違いが分かりませんでした。
(少なくともプロパティ値の増減は無いようです。)
eventオブジェクトの変化は、マウスホイールが登場したあたりでwheelDeltaが追加された様に、Windwos7のマルチタッチが利用できる様になったタイミングで何か変化があるかもしれませんね。

