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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません: