JavaScript イベント処理プロセスはいくつかのステップに分かれています

Javascript イベント処理プロセスは 3 つのステップに分かれています: 1. イベントの発生、2. イベント ハンドラーの開始、3. イベント ハンドラーの反応。このうち、イベント ハンドラーを開始するには、指定されたオブジェクトを通じて対応するイベントを呼び出し、そのイベントを通じてイベント ハンドラーを呼び出す必要があります。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript はオブジェクトベースの言語であり、その最も基本的な機能の 1 つはイベント駆動型です。グラフィカルインターフェイス環境でのすべての操作を簡素化できます。マウスまたはホットキーによるアクションはイベントと呼ばれます。マウスやホット キーによってトリガーされる一連のプログラムの動作をイベント ドライバーと呼び、イベントを処理するプログラムまたは関数をイベント ハンドラーと呼びます。

イベントとイベント処理の概要

イベント処理は、オブジェクト指向プログラミングにおける非常に重要なリンクであり、プログラムの論理構造をより明確にすることができます。プログラムの柔軟性が向上し、プログラム開発効率が向上します。

イベント処理のプロセスは 3 つのステップに分かれています。

• ①イベントが発生します。

• ②イベント ハンドラーを開始します。

• ③イベント ハンドラーが反応します。

このうち、イベント ハンドラーを開始するには、指定されたオブジェクトを通じて対応するイベントを呼び出し、そのイベントを通じてイベント ハンドラーを呼び出す必要があります。イベント ハンドラーには任意の JavaScript ステートメントを使用できますが、通常は特定のカスタム関数を使用してイベントを処理します。

イベントとイベント名

イベントは、スクリプトを通じて応答できるページ アクションです。ユーザーがマウス ボタンを押したり、フォームを送信したり、ページ上でマウスを移動したりすると、イベントが発生します。イベント ハンドラーは、ページの特定の部分および特定のイベントに常に関連付けられている JavaScript コードの一部です。イベント ハンドラーは、ページの特定の部分に関連付けられたイベントが発生したときに呼び出されます。

ほとんどのイベント名は説明的で理解しやすいものです。たとえば、click.submit.mousecover などです。名前からその意味を推測できます。ただし、フィールドまたはフォームがフォーカスを失ったことを意味するブラー (英語で文字通り「ブラー」を意味する) など、名前がわかりにくいイベントもいくつかあります。一般に、イベント ハンドラーの命名原則は、イベント名の前にプレフィックス on を追加することです。たとえば、クリック イベントの場合、ハンドラーには onclick という名前が付けられます。

JavaScript の共通イベント

JavaScript 関連のイベント

#onmouscover#onmousemoveonmouscoutonkeypressonkeydownonkeyupページ関連のイベントonbeforeunload##onerrorこのイベントは、エラーが発生したときにトリガーされますこのイベントは、ページ コンテンツが完了したときにトリガーされます (つまり、ページの読み込みイベント)このイベントは、ブラウザー ウィンドウが閉じられたときにトリガーされますサイズが変更される現在のページが変更されるときにトリガーされるこのイベント

イベント

図示してください

マウスとキーボードのイベント

onclick

このイベントは、マウスがクリックされたときにトリガーされます

ondblclick

このイベントは、マウスがダブルクリックされたときにトリガーされます

onmousedown

このイベントは、マウスがダブルクリックされたときにトリガーされますis pressed

onmouseup

このイベントは、マウスを押して放したときにトリガーされます

# #マウスがオブジェクトの範囲の上を移動したとき このイベントは次のときにトリガーされます

このイベントはマウスが移動したときにトリガーされます

マウスがオブジェクトのスコープを離れるときにこのイベントがトリガーされます

このイベントがトリガーされるのは次の場合ですキーボードのキーが押されて放される

このイベントは、キーボードのキーが押されるとトリガーされます

キーボードのキーが押されたとき このイベントは、押されて放されたときにトリガーされます

#onabort

画像がユーザーによってダウンロードされました。このイベントは、中断が発生したときにトリガーされます。

このイベントは、コンテンツがダウンロードされたときにトリガーされます。現在のページが変更されようとしています

##onload

onresize

onunload

onblurこのイベントは、現在の要素がフォーカスを失ったときにトリガーされますonchange current このイベントは、要素がフォーカスを失い、要素のコンテンツが変更されるとトリガーされます#onfocusonresetonsubmit#ローリング サブタイトル イベントこれは、Marquce 内のコンテンツが Marquce ディスプレイの外に移動するとトリガーされます。 range Eventonfinishこのイベントは、Marquce 要素が表示する必要があるコンテンツを完了したときにトリガーされます。このイベントは、Marquce 要素がコンテンツの表示を開始したときにトリガーされます。 contentonstartこのイベントは、Marquce 要素がコンテンツの表示を開始するとトリガーされます。Edit イベントこのイベントは、ページ上で現在選択されているコンテンツが閲覧者のシステムのクリップボードにコピーされるときにトリガーされます。 #onbeforecut ページ上のコンテンツの一部またはすべてがコピーされたとき、このイベントは、ビューアのシステム クリップボードに切り取られたときに発生します。onbeforeeditfocusThis現在の要素が編集状態に入ろうとしているときにイベントがトリガーされますonbeforepasteこのイベントは、コンテンツがビューアのシステム クリップボードからコンテンツに貼り付けられるときにトリガーされます。 pageonbeforeupdate ビューアがコンテンツをシステム クリップボードに貼り付けたときにターゲット オブジェクトに通知しますoncontextmenuビューアがマウスの右ボタンを押してメニューが表示されるか、キーボードのキーによってページがトリガーされたとき このイベントは、メニューが表示されるときにトリガーされますoncopyこのイベントは、ページ上で現在選択されているコンテンツがコピーされるときにトリガーされますこのイベントは、ページ上で現在選択されているコンテンツがコピーされるときにトリガーされます このイベントは、オブジェクトがドラッグされるとトリガーされます (アクティビティ イベント)このイベントは、マウスのドラッグが終了したとき、つまりマウス ボタンが放されたときにトリガーされますこのイベントは、オブジェクトがマウスでドラッグされたときにトリガーされますコンテナ スコープへ オブジェクトがマウスでドラッグされたとき このイベントは、ドラッグされたオブジェクトがコンテナのスコープから出るときにトリガーされますondragoverこのイベントは、ドラッグされたオブジェクトが別のオブジェクトのコンテナのスコープ内にドラッグされたときにトリガーされます。 Eventondragstartこのイベントは、オブジェクトがドラッグされるときにトリガーされますこのイベントは、ドラッグ中にマウス ボタンが放されるとトリガーされますprocessonlosecaptureこのイベントは、要素がマウスの動きによって形成された選択フォーカスを失ったときにトリガーされます。onpasteこのイベントは、コンテンツが貼り付けられたときにトリガーされます onselectテキスト コンテンツが貼り付けられたとき、このイベントは選択時にトリガーされますonselectstartこのイベントは、テキスト コンテンツの選択が開始されるときにトリガーされます

	イベント	説明
##フォーム関連イベント
	このイベントは、要素がフォーカスを取得するとトリガーされます
	このイベントは、フォームの RESET 属性がアクティブ化されたときにトリガーされます。
	このイベントは、フォーム内の RESET 属性がアクティブ化されたときにトリガーされます。フォームが送信される
onbounce
onbeforecopy
		##oncut
		ondrag
		ondragend
		ondragente
		#ondragleave
		ondrop

onafterupdateこのイベントは、データ ソースからオブジェクトへのデータの転送が完了するとトリガーされますoncellchange ondataavailableondatasetchangedondatasetcompleteonerrorupdate#データ バインディング イベントこのイベントは、現在のデータ ソースのデータが変更され、新しい有効なデータがあるときにトリガーされますonrowexitこのイベントは、現在のデータ ソースのデータが変更されるときにトリガーされます。onrowsdeleteこのイベント現在のデータ レコードが削除されるときにトリガーされます。 このイベントは、現在のデータ ソースが新しいデータ レコードを挿入しようとしているときにトリガーされますonafterprintonbeforeprint このイベントは、ドキュメントが印刷されるときにトリガーされますonfilterchangeこのイベントは、オブジェクトのフィルター効果が変更されるときにトリガーされますonhelpこのイベントは、閲覧者が F1 キーを押すか、ブラウザのヘルプ メニューをクリックするとトリガーされます

	イベント	説明
##データ バインディング イベント
	このイベントは、データ ソースが変更されたときにトリガーされます
	このイベントは、データの受信が完了したときにトリガーされます
	このイベントは、データ ソースが変更されたときにトリガーされます
	データ ソースからのすべての有効なデータが変更されたとき、このイベントは、
	afterupdate イベントの代わりに onbeforeupdate イベント トリガーを使用してデータ転送がキャンセルされたときにトリガーされます。
onrowenter
		#onrowsinserted
		##外部イベント
このイベントは、ドキュメントが印刷されるときにトリガーされます
	##onpropertychange	このイベントは、オブジェクトのプロパティの 1 つが変更されるとトリガーされます。 Event
	onreadystatechange	このイベントは、オブジェクトの初期化プロパティ値が変更されるとトリガーされます。
		#イベント ハンドラーの呼び出し

イベント ハンドラーを使用してページを操作する場合、最も重要なことオブジェクトのイベントを通じてイベント ハンドラーを指定する方法です。

1. JavaScript の場合

JavaScript でイベント ハンドラーを呼び出すには、まず処理対象のオブジェクトへの参照を取得し、次に処理関数を割り当てる必要があります。対応するイベントに対して実行されます。

コード:

<input id="save" name="bt_save" type="button" value="保存" />
<script language="JavaScript" type="text/javascript">
	var b_save=document.getElementById("save");
	b_save.onclick=function(){
		alert("单击了保存按钮");
	}
</script>

2. HTML

HTML プログラムでイベント処理を割り当てます。 HTML タグに対応するイベントを追加し、実行するコードまたは関数名を指定するだけです。

<input name="bt_save" type="button" value="保存" onclick="clickFunction();"/>
<script language="JavaScript" type="text/javascript">
	function clickFunction(){
		alert("单击了保存按钮");
	}
</script>

【関連する推奨事項:

JavaScript ビデオ チュートリアル 、プログラミング ビデオ

]

以上がJavaScript イベント処理プロセスはいくつかのステップに分かれていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。