JavaScript イベント学習 第 6 章 イベントアクセス_JavaScript スキル

イベント ハンドラーを登録したので、イベントについてさらに詳しく学びたいと思います。イベントが発生したときのマウスの位置と、ユーザーがどのキーを押したかを知りたいのです。これらはすべて可能ですが、この部分にはブラウザの互換性に関する厄介な問題がたくさんあります。 (ここでブラウザの互換性リストをすぐに確認できます)。
イベントのプロパティを読み取るには、まずイベントにアクセスできる必要があります。
ブラウザの互換性
ブラウザ戦争の観点から見ると、Netscape はアクセス モデル (後に W3C によって参照として使用されました) と多くのイベント属性を実装し、Microsoft も同様のことを行いました。もちろん、この 2 つのモデルにはまったく互換性がありません。しかし、冒頭で述べたように、

がコード をコピーした場合、コードは次のようになります:

if (W3C/Netscape) {
アクセス名とプロパティ名に W3C/Netscape モデルを使用
}
else if (エクスプローラー) {
アクセス名とプロパティ名に Microsoft モデルを使用
}

これは、互換性の問題を解決するための間違った方法であり、ほとんどのコードを実行できるにもかかわらず、それが考慮されていない一部のブラウザは役に立たなくなります。したがって、最初にイベントにアクセスしてから、そのプロパティを個別に読み取る必要があります。
最初にイベントへのアクセスの問題について説明します。イベント属性については後で説明します。
W3C/Netscape
W3C/Netscape イベント アクセス モデルでは、イベントはパラメーターとしてイベント ハンドラーに渡されます。したがって、イベント ハンドラーを定義すると、
element.onclick=doSomething;

doSomething() はイベントをパラメーターとして受け取ります。これを e 変数に保存するのが一般的ですが、もちろん任意の名前に変更できます:

コードをコピー コード

function doSomething(e) {
// e はイベントへのアクセスを与えます
}

これは完全に自動であり、追加はありませんコードが必要です。匿名関数では、次のように記述できます:
element.onclick = function (e) {alert('Event type is ' e.type)}

Microsoft
Microsoft のイベント アクセス モデルではは、最後に発生したイベントを含む特別なプロパティ window.event です。

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

element.onclick = doSomething;
function doSomething() {
// window.event はイベント
}

または

にアクセスします。コードをコピーします コードは次のとおりです:

element.onclick = function () {alert('イベント タイプは ' window.event.type)}

イベントとイベント
古い Netscape 属性 window.Event もあることに注意してください。 IE はこれを理解せず、Netscape 4 はこれを誤って解釈します。したがって、記述するときは、event が小文字の e で始まることを確認してください。
クロスブラウザ イベント アクセス
幸いなことに、クロスブラウザ アクセス イベントのスクリプトを記述するのは非常に簡単です:

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

element.onclick = doSomething;

function doSomething(e) {
if (!e) var e = window.event ;
// e はすべてのブラウザでイベントへのアクセスを許可します
}

e が存在しない場合は、それを window.event に割り当てます。 e はすべてのブラウザのイベントを表すようになりました。
インライン イベント ハンドラーとマージ
インライン登録モデルでは、イベントを関数に渡す必要があります:

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

 

function doSomething(e) { 
alert( e.type ); 
} 

 

(window.) イベントは Microsoft モデルでは正しい属性ですが、他のブラウザーでも認識できます。
続き
学習を続けたい場合は、次の章をお読みください。
元のアドレス: http://www.quirksmode.org/js/events_access.html
最初の翻訳を含めてください: @rehawk