JavaScript での一般的なイベント タイプの整理

この記事では、javascript に関する関連知識を提供します。主に、マウス イベント、キーボード イベントなど、一般的な JavaScript イベント タイプに関する関連問題を紹介します。一緒にそれについて話しましょう。ぜひご覧ください。お役に立てれば幸いです。みんな。

[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]

マウス イベント

#イベント タイプ

• click: ユーザーがマウスのメイン ボタン (通常は左ボタン) をクリックするか、フォーカス中に Enter キーを押します。 when
• dblclick: ユーザーがマウスのメイン ボタンをダブルクリックするとトリガーされます (頻度はシステム構成によって異なります)
• mousedown: ユーザーがいずれかのマウス ボタンを押したときにトリガーされます
• Mouseup: ユーザーがマウスを持ち上げるとトリガーされます。 いずれかのマウス ボタンが押されたときにトリガーされます。
#mousemove: マウスが要素上を移動するとトリガーされます。
• mouseover: マウスが要素に入るとトリガーされます
• mouseout: マウスが要素から離れるとトリガーされます
• mouseenter: マウスが要素に入るとトリガーされ、イベントはバブルしません
• mouseleave: マウスが要素から離れるとトリガーされ、イベントはバブルしますバブルではありません

違い:

子要素に関係なく、親要素から次の要素に何度も移動します。子要素は、親要素に対して、依然として退出としてカウントされます
• enter と Leave は、依然として親要素の一部である子要素を考慮してください
• mouseenter と Mouseleave はバブルしません

イベント オブジェクト

イベント ハンドラー内のすべてのマウス イベントとイベント オブジェクトは MouseEvent

altKey です。イベントがトリガーされたとき、キーボードの alt キーが押されたかどうか
• ctrlKey: イベントがトリガーされたときに、キーボードの Ctrl キーが押されたかどうか
• shiftKey: イベントがトリガーされたときキーボードの Shift キーが押されているかどうかに関係なく、トリガーされます。
• button: イベントがトリガーされるとき、マウス ボタンのタイプ
• 0: 左ボタン
  • 1: 中ボタン
  • 2: 右ボタン

##位置

ページ: ページX、ページY、ページからの現在のマウスの距離の水平および垂直座標

• client: clientX、clientY、マウスはビューポートを基準としています 座標
• offset: offsetX、offsetY、イベント ソースのパディングを基準としたマウス
• screen: screenX, screenY、画面を基準としたマウス
• x, y、 clientX、clientY
• movement に相当: moveX、movementY、マウス移動イベントでのみ有効、最後のマウス位置を基準としたオフセット距離
• #キーボードイベント

イベントタイプ

keydown: キーボード上の任意のキーを押すとトリガーされます。押したままにすると、このイベントが繰り返しトリガーされます

keypress:
• 文字キーを押すとトリガーされますキーボードの
• keyup: キーボードの任意のキーを持ち上げることによってトリガーされます
• keydown、ブロックされている場合はキーを押します イベントのデフォルトの動作がなければ、テキストは表示されません。

イベント オブジェクト

KeyboardEvent

コード: キー文字列を取得し、キーボード レイアウトに適応させます。

key: キーボード レイアウトに合わないキー文字列を取得します。印刷された文字を取得できます。
• keyCode: キーボード コードを取得します。

フォーム イベント

focus: 要素要素がユーザーと対話できるときにトリガーされます (ユーザーと対話できるすべての要素がフォーカスされます)。イベントはバブルしません

blur: 要素がフォーカスを失ったときにトリガーされ、イベントはバブルしません。
• submit: フォーム イベントを送信します。フォーム要素内でのみ有効です。
• change: テキスト変更イベント
• input: テキスト変更イベント、即時にトリガー
• その他のイベント

ウィンドウ グローバル オブジェクト

load、DOMContentLoaded、readystatechange

• windowload:ページ内のすべてのリソースが読み込まれたイベント
Imageload:画像リソースが読み込まれたイベント

ブラウザでページをレンダリングするプロセス:

ページのソース コードを取得します

ドキュメント ノードを作成します
1. 次から順に dom ツリーに要素を追加します。上から下へ、要素が追加されるたびに事前レンダリングが行われます。
2. 構造に従って子ノードを順番にレンダリングします。
4. ドキュメントの DOMContentLoaded: dom の後に発生します。ツリーが構築されます

readystate (ページには 3 つの状態があります

): ロード中 (読み込み中)、インタラクティブ (対話型)、完了 (完了)

インタラクティブ: DOMContentLoaded イベントをトリガーします

complete: Window のロード イベントをトリガーします。

readystatechange (ページの状態が変更されたときにトリガーされます // 変更された状態に戻ります)

js コードをページの下部に書き込む必要がありますできるだけ＃＃＃＃＃ ＃

• css はページの上部に記述する必要があります : ちらつきを避けます (ページの下部に配置すると、最初に要素にスタイルがなくなるため、次を使用します)醜いデフォルトのスタイルを使用し、CSS がファイルを読み取ったときにスタイルを再変更します)

• JS をページの最後に書き込む必要があります :後続のレンダリングのブロックを回避し、JS 要素の実行時にページ内のコンテンツを取得できないことを回避します。

• unload、beforeunload

beforeunload: ウィンドウ イベント。ウィンドウが閉じられたときに実行され、ウィンドウが閉じるのを防ぐことができます。
unload : window イベント、ウィンドウが閉じられたときに実行されます。

• scroll

イベントはウィンドウがスクロールされたときに実行されます。

scrollTop とscrollLeft を介して、スクロール距離を変更できます。を取得して設定します。

• resize

ウィンドウ サイズが変更されるとイベントが実行され、ビューポート サイズが監視されます

• contextmenu

右クリック メニュー イベント

• 貼り付け

イベントの貼り付け

• コピー

イベントのコピー

• カット

遠方からの写真

##要素の位置

offsetParent

要素の最初に位置する祖先要素を取得します (そうでない場合は、offsetParent を取得します)。 body

body as null

offsetLeft, offsetTop //配置された要素からの距離は、要素の座標を基準とした body

からの距離です。 offsetParent

offsetParent が body の場合、Web ページ全体として扱います

getBoundingClientRect メソッド

このメソッドはオブジェクトを取得します。オブジェクトの距離が記録されます。ビューポートを基準とした要素の相対位置

イベント シミュレーション

クリック シミュレートされたクリック
• sumbit シミュレーションフォームを送信
• dispatchEvent シミュレーション イベント

その他の補足

window.scrollX、window.pageXOffset、window.scrollY、window.pageYOffset

window.scrollX、window.pageXOffset: ルート要素のscrollLeftに相当します

window.scrollY、window.pageYOffset: ルート要素のscrollTopに相当します

scrollTo 、scrollBy

scrollTo: スクロール バーの位置を設定します //window.scrollTo(x, y) すべての dom オブジェクトは

を使用できます。scrollBy: ウィンドウからの x 軸と y 軸の距離を増やすことを意味します。オリジナルに基づいています。scrollBy(x, y)

resizeTo、resizeBy

[関連する推奨事項:

javascript ビデオ チュートリアル 、webフロントエンド＃＃＃] ＃＃＃

以上がJavaScript での一般的なイベント タイプの整理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。