JavaScript イベント イベント学習 第 1 章 Event_javascript スキルの概要

イベントがなければ、スクリプトは存在しません。 JavaScript コードを含む Web ページを見てください。ほとんどすべての例に、スクリプトをトリガーするイベントがあります。理由はとても簡単です。 JavaScript は、ページに内部アクティビティを追加することを目的としています。つまり、ユーザーが何かをすると、ページが応答します。

したがって、JavaScript にはユーザーのアクションを検出し、いつ反応するかを知る方法が必要です。これには、どの関数が実行されるのかを知る必要もあります。その関数は、Web ページに色を加えると思われるいくつかのアクションを実行します。これらの言葉は、そのようなスクリプトの書き方を説明しています。簡単ではありませんが、とてもやりがいのある仕事です。

ユーザーが何かを行うとイベントが発生します。もちろん、ユーザーによって直接トリガーされないイベントもあります。たとえば、ページが読み込まれると、load イベントがトリガーされます。

JavaScript はいくつかのイベントを検出できます。 Netscape 2 以降では、HTML 要素にイベント ハンドラーを追加できるようになりました。これらのイベント ハンドラーは、リンクのクリックなどの特定のイベントを待機します。イベントが発生すると、指定した JavaScript コードを通じてイベントが実行されます。

ユーザーがアクションを実行すると、イベントがトリガーされます。インタラクションは、コードによってページがこのアクションに応答するときに発生します。

イベント ハンドラーの歴史

上で述べたように、イベント ハンドラーのないページに JavaScript を追加する必要はありません。最良のスクリプトは、ユーザーのアクションに反応するスクリプトです。したがって、Netscape が JavaScript をサポートするブラウザの 2 番目のバージョンをリリースしたとき、イベントもサポートされました。

Netscape モード

Netscape は、少数のイベント セットのみをサポートします。マウスオーバーとマウスアウトは、マウスをロールインすると画像が変化し、マウスをロールアウトすると元の状態に戻るクールな効果のため、すぐに人気になりました。また、ユーザーがフォームを送信したか、フォームをリセットしたかを確認できるため、クライアント側の検証が可能になります。ブラウザーは、フォーム内の項目がいつフォーカスを取得または失ったか、あるいはページがダウンロードを完了したか、閉じ始めたかを検出することもできます。今ではごく当たり前のことですが、当時としては革新的でした。ユーザーのアクションに対してフィードバックを与えることができるため、真のインタラクションが可能になります。

最も古い形式のイベント ハンドラーは次のようになります。ユーザーがリンクをクリックすると、イベント ハンドラーが実行され、ダイアログ ボックスが表示されます。



この最も古いイベント処理方法に注目してください。 Netscape の標準は非常に重要です。 JavaScript を動作させたい場合、IE を含む他のブラウザは Netscape 2 および 3 のイベント処理標準に従う必要があります。したがって、これらの最も古いイベントとイベント ハンドラーは、どの JavaScript ブラウザーでも問題なく動作します。

現在のイベント モード

ただし、以前の紹介と比較すると、現在のイベント ハンドラーは大きく変更されています。 1つ目は、量の急速な増加です。 HTML 要素のイベント ハンドラーを登録する方法も大幅に変更されました。 JavaScript で完全に設定できるようになりました。多くのコードに固執する代わりに、非常に単純なコードを記述してすべてのイベント ハンドラーをセットアップできます。
V4 ブラウザでは、イベントに関する多くの情報も提供されます。マウスはどこにありますか?事件はいつ起こりましたか?キーボードが押されていますか?最終的に、ブラウザーは、要素とその親要素の両方に同じアクションのイベント ハンドラーがあるように選択する必要があります。どのイベントが最初にトリガーされますか?
この機能のため、ブラウザ間の戦争は激化しました。Netscape と Microsoft は、互いにほとんど互換性のない 2 つのイベント モデルを開発しました。最近、3 番目のモデルが出現し始めています。それは、w3c によって公開された DOM Event 仕様です。重大な欠陥がありますが、w3c モデルは古い Netscape モデルに基づいていますが、より一般化されており、非常に優れた作品であり、多くの興味深い機能が追加されており、古いイベント モデルのいくつかの問題も解決されています。
3 つのモデルがあるため、イベント ハンドラーはすべてのブラウザーで同じ方法で実行できるわけではありません。

ブラウザの互換性の問題

続けてみましょう。 DHTML、w3c DOM、またはその他の高度なスクリプト テクノロジと同様に、私たちは他人に代わって購入するすべてのバイトについて注意する必要があります。 IE で stopPropagation() を使用するか、Netscape で srcElement を使用すると、重大なエラーが発生し、コードが役に立たなくなります。したがって、メソッドや属性を使用する前に、ブラウザのサポートについて必要なチェックを行う必要があります。
簡単なコード スニペットは次のとおりです:

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

if ( Netscape) {
Netscape モデルを使用
}
else if (エクスプローラー) {
Microsoft モデルを使用
}

これは問題解決の始まりにすぎません。コードで Netscape や IE 以外の少数のブラウザの実行が許可されていない限り、最近のブラウザで実行できるイベント ハンドラの数は膨大です。

すべてのニッチなブラウザは、そのイベント モデルをサポートするという地味な決定を下す必要があります。 Konqueror/Safari は通常、W3C 標準に厳密に従うことを選択します。 Opera と iCab は通常、ほとんどの古い Netscape モデルと一部の Microsoft モデルをサポートしています。他のよりニッチなブラウザについては調査していません。

しかし、他のよりニッチなブラウザは、W3C や古い Netscape の属性も持ちながら、Microsoft のイベント処理方法をサポートすることを選択する可能性があります。それは何も悪いことではありません。それらはすべて、私たちが知っているモデルを独自の方法でサポートしています。コードに問題はないはずです。

ブラウザの種類検出を使用しないでください

まず第一に、ブラウザの種類検出は決して使用しないでください。これは地獄への近道です。イベント モデルを検出するために navigator.userAgent を使用するコードがある場合、それはまったく役に立たないため、直接取り出す必要があります。
第二に、イベント オブジェクト検出と DHTML オブジェクト検出を混同しないでください。 DHTML を作成するときは、通常、if(document.all) などの DOM サポートを確認します。サポートされている場合、Microsoft のすべてのコンテナーを使用すると、コードは非常に適切に実行できます。
ただし、DHTML とイベント ハンドラーには異なるブラウザ互換モードがあります。たとえば、Opera 6 は W3C DOM の一部をサポートしていますが、W3C イベント モデルはサポートしていません。したがって、Opera では DHTML オブジェクト検出により誤った判断が行われます。したがって、コードで if(document.layers) またはその他のイベント モデル検出を使用することは正しくありません。

正しい質問

では、どうすればよいでしょうか? Event プロパティの名前がこれらの問題の原因となります。特定のオブジェクトの検出にさまざまな方法を使用すると、基本的にブラウザーの非互換性の問題の 99% を解決できます。非常に面倒なのはマウスの位置だけで、それ以外は比較的簡単です。
また、これら 3 つのイベント モデルについてはまったく考えないのが最善です。実際には、4 つのイベント登録モデル、2 つのイベント実行モデル、および 2 つのイベント シーケンスを理解する必要があります。 ここでは、イベントの互換性リストをすぐに表示できます。
とても複雑そうに思えますが、実際はそうではありません。これに気づいたら、イベント ハンドラーを真に理解し始める必要があります。すべては正しい質問をすることです。 「イベント ハンドラーのコードはどのように記述すればよいですか?」という質問はしないでください。たとえそれが正しい質問であっても、答えるのは難しいです。説明するには 11 ページの記事が必要になります。したがって、具体的な答えが得られる具体的な質問をする必要があります。

「どのようなイベントがありますか?」
「HTML 要素のイベント ハンドラーを登録するにはどうすればよいですか?」
「それを防ぐにはどうすればよいですか?」 ? デフォルトのアクションが発生するとどうなりますか? "
"イベントを正常にトリガーしたら、どのようにしてイベントにアクセスしますか?"
「要素とその親要素の両方にイベントのイベント ハンドラーがある場合、誰が最初にそれを実行しますか?」

上記のすべての質問については、別の章で詳しく説明します。
クロスブラウザー イベント ハンドラーを作成するコツは、イベント モデル全体を使用するのではなく、各質問に個別に答えることです。イベントのプロパティを読み取る必要がある場合にのみ、ブラウザーの互換性の問題を考慮する必要があることがわかります。
最初にイベント登録モデルを選択し、次にこのイベントがすべてのブラウザでトリガーされることを確認し、次に正しい属性を読み取り、最後にイベントのトリガー順序の問題 (存在する場合) を解決します。このようにして、ブラウザーの互換性の問題を簡単に解決し、コードがすべてのブラウザーで適切に実行されることを確認できます。

続き

イベントを順番に学びたい場合は、次の章から読み始めてください。


イベント ハンドラー コードを記述する
では、イベント ハンドラー コードを記述するにはどうすればよいでしょうか?すぐに答えを知りたい、後で理論を学ぶ予定がある人のために、この章で簡単な概要を説明します。


イベント ハンドラーを登録する
最初のステップは、イベント ハンドラーを登録することです。確認する必要があるのは、ブラウザーが常にコードを実行するということです。
イベント ハンドラーを登録するには、インライン、トラディショナル、w3c、Microsoft の 4 つの方法があります。
従来の方法を使用するのが最善です。この方法はブラウザ間で適切に機能し、自由度と汎用性が高いためです。次のようにイベント ハンドラーを登録します。

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

要素。 onclick = doSomething;
if (element.captureEvents) element.captureEvents(Event.CLICK);

これで、この関数 doSomething() は、HTML 要素のクリック イベントのイベント ハンドラーとして登録されます。これは、ユーザーがこの要素をクリックするたびに doSomething() が実行されることを意味します。

このイベントにアクセスします

ただし、イベント ハンドラーを登録したら、実際のコードの作成を開始します。通常は、イベントの情報を読み取るために、イベント自体にアクセスする必要があります。

このイベントにアクセスしてそのプロパティを読み出すには、通常、イベント ハンドラーは次のように開始します:

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

function doSomething(e) {
if (!e) var e = window.event
// e はイベント
を参照しますここで、 e はすべてのブラウザのイベントを表し、このイベントにアクセスすることもできます。

この HTML 要素へのアクセス


イベントが発生した要素にアクセスできるようにしたい場合があります。ここには 2 つの方法があります。このキーワードを使用するか、target/srcElement 属性を使用します。
HTML 要素にアクセスするより安全な方法は、this キーワードを使用することです。これは常に正しい HTML 要素を指すとは限りませんが、従来のモードではうまく機能します。




コードをコピー

コードは次のとおりです。 function doSomething(e) { if (!e) var e = window.event

// e はイベントを参照します

// これは現在イベントを処理している HTML 要素を参照します
// target/srcElement を参照しますイベントが最初に発生した HTML 要素
}



target/srcElement 属性には、イベントが最初に発生した HTML 要素への参照が含まれます。非常に便利ですが、イベントがキャプチャまたはバブルされると、イベントが最初に発生した要素のままになり、変化しません。

プロパティの読み取り


興味深いイベント プロパティ (イベント プロパティ) の読み取りの問題は、ブラウザーの互換性において最悪の部分です。この互換性リストを調べて、独自のコードを作成して必要な情報を取得してください。 常に最も慎重なオブジェクト検査を行ってください。まず各属性が存在するかどうかを確認し、次にその値を読み取ります。例:



コードをコピー

コードは次のとおりです。 function doSomething(e) { if (!e) var e = window.event

if (e.keyCode) code = e.keyCode;

else if (e.that) code =
}


コードには押されたキーが含まれ、すべてのブラウザーと互換性があります。

イベントの順序


最後に、イベントをバブルアップするかどうかを決定する必要があります。イベントをバブルアップさせたくない場合は、イベントをブロックします:


コードをコピーします

コードは次のとおりです: function doSomething(e) { if (!e) var e = window.event

// イベントを処理します

e.cancelBubble = true; .stopPropagation) e.stopPropagation( );
}



コードの記述
これで、イベント ハンドラーのコードの記述を開始できます。前のコードと情報を通じて、イベントがいつ発生するか、コードがどのように応答するかを知ることができます。覚えておいてください: インタラクションをより論理的にしないと、ユーザーは何が起こっているのか理解できません。