一般的なイベントを処理するための 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リダイレクトを実装しています

推薦する

CentOS7 カーネル カーネル5.0 バージョンアップグレード

アップグレードプロセス:元のシステム: CentOS7.3 [root@my-e450 ~]# un...

redhat7 に yum 経由で mysql5.7.17 をインストールするチュートリアル

RHEL/CentOS シリーズの Linux オペレーティング システムには MySQL ソース自...

nginx のスムーズな再起動を実装する方法

1. 背景サーバーの開発プロセスでは、新しいコードや構成をロードするためにサービスを再起動することが...

CSS3 border-radius 丸角の実装方法と使い方の詳しい説明

以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、bor...

Vueはキャンバスの手書き入力を使用して中国語を認識します

効果画像: 序文:最近、屋外の大画面プロジェクトに取り組んでいました。システムの入力方法は使いにくか...

nginx を使用して 1 つのドメイン名で複数の Laravel プロジェクトを構成する方法の例

背景会社のサブプロジェクトが増えるにつれて、さまざまなサイズのプロジェクトが10個以上になります(バ...

反応ジャンプ後にルートが変更されてもページが更新されない場合の解決策

目次質問解決質問この問題には多くの理由があるようです。私の問題は、パラメータ付きのURLを更新できな...

MySQL8.0.18 複数マスターと 1 スレーブの構成

目次1. 現実的な背景2. 合意3. マスターを構成する3.1. 起動パラメータの設定3.2. パラ...

マークアップ言語 - 印刷スタイルシート

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

各 Nginx プロセスで開くことができるファイルの最大数を設定する方法

1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...

imgタグ間のスペースの問題の詳細な説明

IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...

IE をフリーズさせる HTML コード

任意のテキスト エディターを開き、次のコードをコピーして、たとえば SomeFilename.htm...

正の整数かどうかを判断するMYSQLカスタム関数の例コード

関数を記述できます。主に正規表現を使用して判断を行います。入力文字が空の場合は、「-」を使用して置き...

Docker で MySQL 接続と設定ファイルの最大数を変更する

1. MySQLイメージを見つける ドッカーps 2. ミラーmysqlイメージを入力する dock...

主キーを追加または変更するMySQL SQL文操作

テーブルフィールドを追加する テーブルtable1を変更し、トランザクタvarchar(10)をNu...