一般的なイベントを処理するための JavaScript の使用に関する詳細な説明

一般的なイベントを処理するための JavaScript の使用に関する詳細な説明

JS イベントとは、ブラウザのフォームまたは HTML 要素で発生し、JS コード ブロックの実行をトリガーする動作を指します。次に、関連するイベントを見てみましょう。

1. フォームイベント

たとえば、onload イベント: ページが完全に読み込まれると (画像、js ファイル、css ファイルなどを含む)、このイベントがトリガーされます。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>フラワードッグオンライン</title>
		<スクリプト>
		window.onload = 関数(){
			var mydiv = document.getElementById("mydiv");
			alert("ページの読み込みが完了しました。mydiv の内容は次のとおりです: "+mydiv.innerText);
		}
		</スクリプト>
	</head>
	<本文>
		<div id='mydiv'>私は花犬であり、花犬の花であり、花犬の犬です。 </div>
	</本文>
</html>

ここに画像の説明を挿入
以下もあります:

サイズ変更イベント: ブラウザ ウィンドウが新しい幅または高さに調整されると、サイズ変更イベントがトリガーされます。

スクロール イベント: ドキュメントまたはブラウザー ウィンドウがスクロールされると、スクロール イベントがトリガーされます。

フォーカス イベント: テキスト ボックスの選択や選択解除など、要素がフォーカスを取得または失うことを指します。


2. マウスイベント

たとえば、マウスが左ボタンをクリックすると、onclick イベントが発生します。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>フラワードッグオンライン</title>
		<スタイル>
			html,本文{
				幅: 100%;
				高さ: 100%;
			}
		</スタイル>
		<スクリプト>
		関数 マウスクリック(){
		alert('ページがクリックされました');
		}
		</スクリプト>
	</head>
	<body onclick="マウスクリック()">
		<div id='mydiv'>私は花犬であり、花犬の花であり、花犬の犬です。 </div>
	</本文>
</html>

注意:將html和body 的樣式表都設置為width: 100%,height: 100%,否則onclick無效。

ここに画像の説明を挿入


3. キーボードイベント

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>フラワードッグオンライン</title>
		<スタイル>
			html,本文{
				背景色: アクアマリン;
				幅: 100%;
				高さ: 100%;
			}
		</スタイル>
		<スクリプト>
		関数keydown(イベント){ 
			イベントキーコード==37の場合
				alert(event.keyCode +'左ボタンを押しました');
			}
			イベントキーコードが38の場合
				alert(event.keyCode +'上キーが押されました');
			}
			if(イベント.keyCode==39){
				alert(event.keyCode +'正しいボタンを押しました');
			}
			イベントキーコードが40の場合
				alert(event.keyCode +'下矢印キーが押されました');
			}
		}
		</スクリプト>
	</head>
	<body onkeydown="keydown(イベント)">
	</本文>
</html>

ここに画像の説明を挿入


4. 共通イベントメソッド(ウィンドウイベント、マウスイベント、キーボードイベント、テキストイベントを含む)

方法説明する
中止画像の読み込みが中断されました
ぼやけている要素がフォーカスを失う
オンチェンジユーザーがフィールドの内容を変更する
クリック時マウスでオブジェクトをクリックする
クリックオブジェクトをダブルクリック
エラードキュメントまたは画像の読み込み中にエラーが発生しました
オンフォーカス要素にフォーカスがある
キーダウンキーボードのキーが押された
キーを押すとキーボードのキーが押されたり、
オンキーアップキーボードのキーが離されました
アップロードページまたは画像の読み込みが完了しました。
マウスダウン時マウスボタンが押された
マウスを動かすマウスを動かすと
マウスアウト時マウスを要素から離す
マウスオーバー時マウスを要素の上に移動する
マウスを離すマウスボタンが放される
リセット時リセットボタンがクリックされた
サイズ変更ウィンドウまたはフレームのサイズが変更されます
選択時テキストが選択されました
送信時送信ボタンがクリックされた
オンアンロードユーザーログアウトページ

5. イベントバブリングとイベントキャプチャ

イベントが発生すると、イベント ストリームが生成されます。HTML 要素がイベントを生成すると、イベントは再帰と戻りと同様に、特定の順序で要素ノードとルート ノードの間で伝播されます。イベントをトリガーする方法は次のとおりです: addEventListener("click","doSomething","true"); 3 番目のパラメータが true の場合はイベント キャプチャ、false の場合はイベント バブリング、デフォルトはバブリングです。

キャプチャイベントの伝播:


ここに画像の説明を挿入


バブリングイベントの伝播


ここに画像の説明を挿入

これで、JavaScript を使用して一般的なイベントを処理する方法に関するこの記事は終了です。js を使用して一般的なイベントを処理する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript BOMの構成と一般的なイベントの詳細な説明
  • JSイベントバインディングの一般的な例のまとめ
  • 一般的な JavaScript イベントの紹介
  • js モバイルイベントの基礎と一般的なイベントライブラリの詳細な説明
  • JavaScript イベントバインディングの一般的な方法とその長所と短所について簡単に説明します。
  • 最もよく使用されるJavaScriptイベントについて詳しく学ぶ

<<:  2級コンピュータ試験のMySQL知識ポイント mysql alterコマンド

>>:  IISとAPACHEはHTTPSへのHTTPリダイレクトを実装しています

推薦する

VMware12 インストール centOS8 構成グラフィック チュートリアルの詳細説明 (vm 仮想マシン インストール centos8 チュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...

ReactとReduxの関係を詳しく説明

目次1. reduxとreactの関係2. Reactのマルチコンポーネント共有3. reduxの3...

Ubuntu システムにおける Mysql ERROR 1045 (28000): ユーザー root@localhost へのアクセスが拒否される問題の解決方法

最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...

mysql はフィールドコンテンツの一部を置き換え、mysql は関数 replace() を置き換えます。

[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...

Docker swarm の簡単なチュートリアル

3つの仮想マシン132、133、134を群がらせる1. クラスターを初期化し、自分自身をクラスターに...

IE7でソースファイルを含むページを開くとページが空白になる問題の解決方法

質問:私のブログのエンコーディングは utf-8 です。ページを開くと空白になっていることもあります...

Linux bzip2 コマンドの使用

1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...

mysql binlog (バイナリログ) を表示する方法

たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...

マークアップ言語 - アンカー

前: マークアップ言語 - フレーズ要素 オリジナルソース 第 7 章 アンカーHTML のリンクの...

Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

目次1. 親コンポーネントが子コンポーネントにデータを渡す1.1. 親コンポーネントコード1.2. ...

Linux で開いているファイルが多すぎる問題を解決する方法

原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...

VMware 仮想マシンでの Centos8 ブリッジの静的 IP 設定方法

1. ネットワーク接続方法がブリッジされていることを確認する物理ネットワーク接続ステータスのコピーを...

Dockerはdockerfileを使用してnode.jsアプリケーションを起動します

Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...

Vue が 4 レベルのナビゲーションと検証コードを実装する方法の例

効果: まず5つのVueインターフェースを作成する1.home.vueページ <テンプレート&...