この記事は、JS DOM の一般的なイベントを誰でも簡単にまとめたものです。興味のある方は参考にしてください。
クリック クリック dblclick ダブルクリック コンテキストメニュー 右クリック マウスオーバー マウスが要素上に移動している場合、mouseout の代わりに Mouseenter を使用することをお勧めします マウスが要素から離れる場合、マウスの代わりに MouseLeave を使用することをお勧めしますマウス入力 マウスが要素の上に移動している マウス放置 マウスが要素から離れる マウスダウン マウスボタンを押す マウスアップ マウスボタンを持ち上げる マウス移動 マウスの動き
keydown キーボードボタンが押された keyup キーボードボタンが上がった keypress キーボードボタンが押された、文字キーを入力するために使用されます
1. どの要素キーボードイベントを聞くことはできますか？
① ドキュメント
② フォーカスを取得できる要素 (フォーム コントロール、特に入力要素)
2. keydown と keypress の違いは何ですか?
① キーダウンはすべてのキーを押すことでトリガーされ、大文字と小文字のキーを区別できません。
② キー押下は、文字を入力できるキーが押された場合にのみトリガーされ、キーは大文字と小文字を区別できます。
3. どのボタンが押されたかを取得するにはどうすればよいですか?
イベント オブジェクトの属性を使用します。
evnet.keyCode は、
keyCode と同じ、event
キーに対応する ASCII 値を取得します
。event.key は、キーの文字値を取得します。
のロードがトリガーされます。ウィンドウまたはボディ要素がロードされると、DOMContentLoaded がトリガーされます。 addEventListener を使用して、アンロード前にイベントをリッスンすることのみが可能です。load イベントと、Web ページが閉じられたときにトリガーされる DOMContentLoaded イベントの違いは次の
とおりです。
① load イベントは、要素や外部を含むページ内のすべてが読み込まれた後にのみトリガーされます。リソース。
② DOMContentLoaded イベントは、外部リソースを除くページ内のすべての要素が読み込まれたときにトリガーできます。
submit は、フォームが送信されるとトリガーされます。このイベントは、form 要素をリッスンします。 このイベントは、フォーム コントロールがフォーカスを取得したときにトリガーされ、フォーム コントロールがフォーカスを失ったときにトリガーされます。入力ボックスの場合、コンテンツが変更され、フォーカスが失われた場合にのみトリガーされます。選択に適しています。
読み込み 画像ファイルのダウンロード完了エラー。
、ウィンドウのサイズ変更とビューポート サイズの変更を監視します。ページまたは要素のコンテンツがスクロールされるときにトリガーされる、スクロール ボディを持つウィンドウまたは要素を監視します。
イベントのコールバック関数に第1仮引数を設定してイベントオブジェクトを取得します。
異なるタイプのイベントは、異なるタイプの Event オブジェクトを取得します。
offsetX / offsetY 対象要素上のマウスの座標位置を取得 clientX / clientY ビューポート上のマウスの座標位置を取得 pageX / pageY ページ上のマウスの座標位置を取得screenX / screenY 画面上のマウスの座標位置を取得します。 ボタン上の座標位置ボタンは、どのマウス ボタンが押されたかを取得します。 0: 左ボタン 1: 中ボタン 2: 右ボタン
keyCodeは、keyCodeと同じボタンに対応するコード値を取得します。 key キーに対応する文字値を取得します。
type イベント名を取得します。 timeStamp イベントがトリガーされてからのミリ秒数を取得します。 target ターゲット要素を取得します。 stopPropagation() イベントのバブリングを防止します。 PreventDefault() ブラウザーのデフォルト動作をブロックします。
では、イベントのコールバック関数でevent.stopPropagation()を実行してバブリングを防止することで、イベントのバブリングを防止します。
ハイパーリンクをクリックしてジャンプフォームを送信およびリセットしたり、右クリックしてシステムメニューをポップアップしたりする
イベントのコールバック関数でevent.preventDefault()を呼び出して、デフォルトの動作を防止します。
注: 2 番目のメソッドを使用してイベントをリッスンする場合、コールバック関数で
return falseによって、デフォルトの動作を防ぐこともできます。
イベントは、祖先要素をリッスンしてターゲット要素を決定し、ターゲット要素が条件を満たしている場合に関連する操作を実行します。
イベント委任の利点:
多数の要素で同じイベントをリッスンする場合、イベント委任を使用した方が、1 つずつ走査してリッスンするより効率的です。
イベント委任を使用すると、新しい要素がイベントに応答できるようになります。
関連する推奨事項: [JavaScript ビデオ チュートリアル]
上記は、一般的な JavaScript DOM イベントの最新の概要です。詳細については、php 中国語 Web サイトの他の関連記事にご注目ください。
