JavaScript イベント学習 第 7 章 イベントのプロパティ_JavaScript スキル

イベントに関する情報を読みたいとき、多くの場合、多数の属性に埋もれてしまいますが、そのほとんどはほとんどのブラウザーでは適切に動作しません。イベント互換性リストは次のとおりです。
これらの属性のリストは作成しません。これらの状況は非常に混乱しており、学習にはまったく役立ちません。 5 つのコードを書く前に、ブラウザに関して 5 つの質問をしたいと思います。
1. イベントの種類は何ですか?
2. イベントの対象となる HTML 要素はどれですか?
3. イベントが発生したときにどのキーが押されましたか?
4. イベントが発生したときにどのマウス ボタンが押されましたか?
5. イベントが発生したときのマウスの位置はどこですか?
最後の質問については、ここで非常に詳細に回答しました。
これらのコードでは非常に厳密なオブジェクト チェックを行っていることに注意してください。まずイベントへのクロスブラウザー アクセスを作成し、各属性を使用する前にブラウザーのサポートを確認しました。

1. イベントの種類は何ですか?
これは標準的な回答を持つクロスブラウザーの質問です: type 属性を使用してそのプロパティを表示します:

コードをコピー コードは次のとおりです。

function doSomething(e) {
if (!e) var e = window.event;
alert(e.type); 🎜> }

2. どの HTML 要素がイベントのターゲットですか?
W3C/Netscape は次のように述べました: ターゲット。いいえ、Microsoft は、それは srcElement だと言いました。どちらのプロパティも、イベントが発生したときに HTML 要素を返します。

コードをコピー コードは次のとおりです。

function doSomething(e) {
var targ;
if (!e) var e = window.event;
if (e.target) = e.target;
else if (e.srcElement) 🎜>if (targ.nodeType == 3) // Safari のバグを無効にする
targ = targ.parentNode;
}

コードの最後の 2 行は、特にサファリ。テキストを含む要素でイベントが発生した場合、要素自体ではなくテキスト ノードがイベントのターゲットになります。したがって、ターゲットのノードタイプが 3 (テキスト ノード) であるかどうかを確認する必要があります。存在する場合は、それを親ノードである HTML 要素に移動します。
イベントがキャプチャされたりバブルアップしたりした場合でも、target/srcElement 属性はイベントが最も早く発生した要素のままです。
その他のターゲット
多くのターゲティング属性があります。 currentTarget についてはイベント順序の記事で説明し、relativeTarget、fromElement、toElement については記事 Mouse イベントで説明しました。


3. イベントが発生したときにどのキーが押されましたか?
この質問は比較的簡単です。まず keyCode 属性からキーのコード (a=65) を取得します。キー値を取得した後、必要に応じて String.fromCharCode() メソッドを通じて実際のキー値を知ることができます。

コードをコピー コードは次のとおりです。

function doSomething(e) {

var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode; 🎜>var 文字 = String.fromCharCode(code);
alert('文字は ' 文字でした);



キーボード イベントの使用が困難になる可能性のある場所がいくつかあります。たとえば、kepress イベントは、ユーザーがキーを押している間発生します。ただし、ほとんどのブラウザではキーダウンのトリガー時間は押した時間と同じ長さです。それが良い考えかどうかは分かりませんが、そういうことです。


4. イベントが発生したときにどのマウス ボタンが押されましたか?
ここには、どのマウス ボタンが押されたかを知るための 2 つのプロパティがあります: what と button。通常、これらのプロパティはクリック時に必ずしも機能するとは限らないことに注意してください。どのマウス ボタンが押されたかを安全に検出するには、mousedown イベントとmouseup イベントを使用することをお勧めします。
これは古い Netscape プロパティです。マウスの左ボタンの値は 1、中央ボタン (スクロール ホイール) の値は 2、マウスの右ボタンの値は 3 です。サポートが弱いことを除けば特に問題はありません。実際、マウスのボタンを検出するためによく使用されます。
ボタンの属性が適切に認識されるようになりました。 W3C の標準値は次のとおりです。
左ボタン 0
中ボタン 1
右ボタン 2
Microsoft の標準値は次のとおりです。
左ボタン 1
中ボタン4
右ボタン 2
Microsoft の標準が W3C の標準よりも優れていることは疑いの余地がありません。 0 はキーが押されていないことを意味し、それ以外はすべて不合理です。
また、Microsoft モデルのみ、ボタンの値を組み合わせることができます。たとえば、5 は「左ボタンと中ボタン」を同時に押すことを意味します。 IE6 はマージをサポートしていないだけでなく、w3c モデルは理論的に不可能です。左ボタンが押されたかどうかは決してわかりません。
つまり、私の意見では、w3c はボタンの定義において重大な間違いを犯したと考えています。

右クリック
幸いなことに、通常は、右ボタンがクリックされたかどうかを知りたいと考えます。 W3C と Microsoft はこの問題に関してたまたまボタンの値を 2 として定義しているため、引き続き右クリックを検出できます。

コードをコピー コードは次のとおりです。

function doSomething(e) {
var rightclick;
if (!e) var e = window.event;
if (e.that) rightclick = (e.that == 3);
else if (e.button) (e. button == 2);
alert('Rightclick: ' rightclick); // true または false
}

通常、Mac のみであることに注意してください。ボタンが 1 つある場合、Mozilla では Ctrl キーを押しながらクリックするボタンの値を 2 と定義しているため、Ctrl キーを押しながらクリックするとメニューも開きます。 ICab はまだマウス ボタンの属性をサポートしていないため、Opera では右クリックを検出できません。
5. イベントが発生したときのマウスの位置はどこですか?
マウスの位置の問題は非常に深刻です。マウス座標には少なくとも 6 つのプロパティがありますが、マウス座標を見つけるための信頼できるクロスブラウザーの方法はまだありません。
次の 6 つの座標セットです:
1. clientX、clientY
2. オフセット X、オフセット Y
4. 画面 X , screenY
6. x, y
pageX/Y と clientX/Y の問題についてはここで説明したことがあります。
screenX と screenY は、ブラウザー間で互換性のある唯一のプロパティのペアです。これらは、コンピュータ画面全体のマウスの座標を示します。残念ながら、この情報だけでは十分ではありません。マウスが画面上のどこにあるかを知る必要はありません。おそらく、現在のマウスの位置に新しいウィンドウを配置したいかもしれません。
他の 3 つの属性ペアは重要ではありません。ここでの説明を参照してください。
正しいコード
次のコードはマウスの座標を正しく検出できます

コードをコピーします コードは次のとおりです

function doSomething(e) {

var posx = 0;
if (!e) var e = window.event; >if (e .pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY>}
else if (e.clientX || e.clientY) {
posx = e.clientX document.body.scrollLeft
document.documentElement.scrollLeft;
posy = e.clientY document.body.scrollTop
document.documentElement.scrollTop; 🎜>// posx と posy にはドキュメントに対する相対的なマウス位置が含まれます
// この情報を使って何かを行います
}



原文はこちら: http://www .quirksmode.org /js/events_properties.html

私の Twitter でアドバイスをください: @rehawk