この記事では、JavaScript に関する関連知識を主に紹介します。イベントとは、ドキュメントやブラウザー ウィンドウで発生するいくつかの特定のインタラクティブな瞬間です。一緒に見ていきましょう。 。
[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]
イベントは、ドキュメントまたはブラウザ ウィンドウ内で発生する対話の特定の瞬間です。 JavaScript と HTML 間の対話は、イベントを通じて実現されます。 Web アプリケーションの場合、代表的なイベントには、クリック イベント、マウスの移動および移動イベント、キーボードの押下/ポップアップ イベントなどがあります。イベントは、ドキュメントまたはブラウザ ウィンドウ内で発生する対話の特定の瞬間です。リスナー (またはイベント ハンドラー) を使用してイベントをサブスクライブし、イベントの発生時に適切なコードが実行されるようにすることができます。
ここでは、一般的に使用されるイベント、ドキュメント読み込みイベント、イベント オブジェクト、イベント バブリング、イベント委任、イベント バインディング、イベント伝播、およびキーボード イベントについて簡単に紹介します。
ドキュメント読み込みイベント (onload): onload イベントは、ページ全体が読み込まれた後にトリガーされます。次のように使用します。
パフォーマンスの観点から、ページの一番下に書いた方が良いです。 js コードは、コードの実行時にページが確実に読み込まれるように、ページの下部に記述されます。 window.onload はページ上に 1 回だけ表示でき、後続のコードは前のコードを上書きします。
イベント オブジェクト: イベントの発生後、イベント オブジェクトが生成され、パラメーターとしてリッスン関数に渡されます。具体的なパフォーマンスは、コールバック関数でイベント パラメーターを渡し、このパラメーターの値が JS によって自動的に渡されることです。このイベント オブジェクトには、イベント (マウス/キーボード) の種類、イベントのトリガー、イベントのターゲットなど、このイベントに関するすべての関連情報が含まれます。
DOM オブジェクト上のイベントがトリガーされると、すべてのイベント関連情報を含むイベント オブジェクト Event が生成されます。イベントを引き起こした要素、イベントの種類、および特定のイベントに関連するその他の情報が含まれます。 DOM 標準ブラウザは、イベント オブジェクトをイベント ハンドラーに渡します。イベント ハンドラーが何であっても、イベント オブジェクトが渡されます。 Event オブジェクトには、それを作成した特定のイベントに関連するプロパティとメソッドが含まれています。トリガーされるイベントの種類が異なり、使用可能なプロパティとメソッドも異なります。図に示すように、マウス/キーボード イベントについて簡単に説明します。
IE のイベント オブジェクトは、DOM のイベント オブジェクトへのアクセスとは異なります。IE でイベント オブジェクトにアクセスするには、イベント ハンドラーの指定方法に応じて、いくつかの方法があります。 IE では、イベント オブジェクトは window オブジェクトの属性として存在します。attachEvent() を使用する場合は、イベント オブジェクトもハンドラーで渡されるか、イベント オブジェクトを取得することができます。以前の方法。以下に例を示します。マウスがボックス上にあるとき、下の p タグはマウスの現在の座標を表示します。
レンダリング：
コード図:
イベント バブリング (バブル): いわゆるバブリングは、子孫要素のイベントがトリガーされると、その祖先要素の同じイベントもトリガーされます。バブルは、開発中のほとんどの状況で役立ちます。バブリングを発生させたくない場合は、イベント オブジェクトevent.cancelBubble=true を使用してバブリングをキャンセルできます。
レンダリング：
コード図:
イベントの委任: イベントを要素の共通の祖先要素にバインドすることを指します。これにより、子孫要素上のイベントがトリガーされると、そのイベントが祖先要素にバブルアップされ、イベントは祖先の応答関数を通じて処理されます。要素。イベント委任ではバブリングを使用することで、イベント バインディングの数を減らし、プログラムのパフォーマンスを向上させることができます。イベント オブジェクトの属性ターゲット: このイベントをトリガーした要素 (イベントのターゲット ノード) を返します。
場合：
レンダリング：
コード図:
イベント バインディング: イベント ハンドラーは 2 つの一般的な方法で要素にバインドできます。HTML 要素のイベント属性を指定してバインドする方法と、DOM オブジェクトの属性を指定してバインドする方法です。イベント リスナー、要素オブジェクトの設定と呼ばれる別の特別な方法があります: addEventListener()。最初の 2 つの方法はイベント ハンドラーをバインドできますが、両方とも 1 つのプログラムのみをバインドでき、1 つのイベントに対して複数のプログラムをバインドできないという欠点があります。 addEventListener() を使用すると、このメソッドを通じて応答関数を要素にバインドすることもできます。 addEventListener() を使用して、複数の応答関数を要素の同じイベントに同時にバインドします。このようにして、イベントがトリガーされると、応答関数は関数のバインド順序で実行されます。このメソッドは IE8 以下のブラウザをサポートしていないため、代わりにattachEventを使用する必要があります。 AttachEvent()、IE8 では、attachEvent() を使用してイベントをバインドできます。このメソッドは、複数の処理関数を同時にイベントにバインドすることもできます。異なる点は、実行順序が addEventListener() とは逆であることです。
イベントの伝播: イベントの伝播は 3 つのステージに分けることができます。 キャプチャ ステージ - キャプチャ ステージでは、イベントは最も外側の祖先要素からターゲット エレメントまでキャプチャされますが、デフォルトではこの時点ではイベントはトリガーされません。イベントがキャプチャされる バブリング段階が完了すると、ターゲット要素はターゲット要素でイベントをトリガーし始めます。イベントはターゲット要素からその祖先要素に送信され、順番に祖先要素でイベントをトリガーします。
キーボードイベント: onkeydown: キーボードが押されたイベント。キーを放さずに押し続けると、常にイベントがトリガーされます。onkeydown イベントが連続してトリガーされると、1 回目と 2 回目の間隔は少し長くなり、それ以外は非常に速くなります。これは悪用を防ぐためです。 onkeyup: キーボードを放したときのイベント。キーボード イベントは通常、フォーカスやドキュメントを取得できるいくつかのオブジェクトにバインドされています。
上記は JavaScript イベントの詳細を簡単にまとめたものです。詳細については、ソース コード ネットワークの他の関連記事を参照してください。