JavaScript でのイベント処理

高洛峰
高洛峰オリジナル
2016-11-25 11:37:371031ブラウズ

イベント処理の概要
イベント処理は、オブジェクトベースのプログラミングの非常に重要な部分です。イベント処理がなければ、プログラムは非常に機能不全になり、柔軟性が欠如します。イベント処理のプロセスは次のように表現できます: イベントの発生 - イベント ハンドラーの開始 - イベント ハンドラーの反応。その中で、イベント ハンドラーを開始するには、何かが起こった場合にどのハンドラーを開始するかをオブジェクトに最初に指示する必要があります。そうしないと、プロセスを続行できません。イベント ハンドラーには任意の JavaScript ステートメントを使用できますが、通常は特定のカスタム関数を使用して処理します。
イベントハンドラを指定するには3つの方法があります:
方法1 HTMLタグ内に直接指定します。この方法が最も一般的に使用されます。メソッドは次のとおりです:

例を見てみましょう:

このような タグの定義により、ドキュメントが読み取られたときに、「Web ページは読み込まれました。ゆっくりお楽しみください」というダイアログ ボックスがポップアップ表示され、ユーザーが終了するときにメッセージが表示される可能性があります。文書を開くと (ウィンドウを閉じるか、別のページに移動するか)、「さようなら」がポップアップ表示されます。
方法 2: 特定のオブジェクトの特定のイベント用の JavaScript を作成します。この方法はそれほど頻繁には使用されませんが、状況によっては依然として役立ちます。メソッドは次のとおりです:

<スクリプト言語="JavaScript" for="window"event="onload">
alert(Webページが読まれています、ごゆっくりお楽しみください!);

方法3をJavaScriptで説明します。メソッド:
. = ;
このメソッドで注意すべき点は、「イベント ハンドラー」は文字列形式のコードではなく、実際のコードであるということです。イベント ハンドラーがカスタム関数の場合、パラメーターを使用する必要がない場合は、「()」を追加しないでください。
functionignoreError() {
return true;
}
window.onerror =ignoreError; // "()" は使用されません
この例では、ignoreError() 関数を window オブジェクトの onerror イベントのハンドラーとして定義しています。その効果は、ウィンドウ オブジェクトの下のエラーを無視することです (アクセスを許可しない位置オブジェクトの参照によって発生する「許可なし」エラーは無視できません)。

イベントの詳しい説明

onblur イベントは、ウィンドウがフォーカスを失ったときに発生します。適用対象: window オブジェクト

onchange イベントは、テキスト入力領域の内容が変更され、フォーカスがテキスト入力領域から移動した後に発生します。このイベントのキャプチャは、主に入力の有効性をリアルタイムで検出するため、またはドキュメントの内容を即座に変更するために使用されます。適用対象: Password オブジェクト、Select Text オブジェクト、Textarea オブジェクト
オブジェクトがクリックされると、onclick イベントが発生します。クリックとは、マウスをオブジェクト上に置き、マウス ボタンを押し、マウスを動かさずにマウス ボタンを放すという完全なプロセスを指します。通常のボタン オブジェクト (Button) には、通常、onclick イベント ハンドラーがあります。これは、この種のオブジェクトはユーザーから情報をまったく取得できず、onclick イベント ハンドラーがなければ役に立たないためです。 onclick イベント ハンドラーをボタンに追加すると、イベント ハンドラーでアクション、ターゲット、エンコーディング、メソッドなどのフォームの 1 つまたは複数の属性を変更し、次の submit() メソッドを呼び出すことで、「別の送信ボタン」をシミュレートできます。フォーム。 。 Link オブジェクトの onclick イベント ハンドラーで false を返すと、ブラウザーは接続を開けなくなります。つまり、次のような接続がある場合: http://www.a.com" false">Go! onerror イベントが発生します。そのイベント ハンドラーは通常「エラー ハンドラー」と呼ばれ、エラーを処理するために使用されます。前述したように、すべてのエラーを無視するには、次を使用します:
functionignoreError() {
return true;
}
window.onerror =ignoreError;
適用先: window object

onfocus イベントは、ウィンドウがフォーカスを取得したときに発生します。適用対象: window オブジェクト

onload イベントは、すべてのドキュメントがダウンロードされるときに発生します。すべてのダウンロードが完了しました。これは、HTML ファイルだけでなく、含まれるすべての画像、プラグイン、コントロール、アプレットなどもダウンロードされたことを意味します。このイベントはウィンドウイベントですが、HTMLでイベントハンドラを指定する場合はタグ内に記述します。適用対象: window オブジェクト

イベントは、ユーザーがオブジェクト上にマウスを置いてマウス ボタンを押すと発生します。参考イベント。適用対象: Button オブジェクト; Link オブジェクト

イベントは、マウスがオブジェクトから離れると発生します。参考イベント。適用対象: リンク オブジェクト

イベントは、マウスがオブジェクト範囲に入ると発生します。このイベントと画像の事前読み取りと組み合わせることで、マウスが画像接続上を移動したときに画像が変化する効果を実現できます。接続をポイントすると、ステータス バーにアドレスが表示されないことがありますが、これらの情報はいつでも変更できるようです。作り方は次のとおりです:
seover="window.status=Click Me Please!; return true;" ; return true;">
適用対象: リンク オブジェクト

このイベントは、ユーザーがオブジェクト上にマウスを置いてマウス ボタンを押し、マウス ボタンを放したときに発生します。マウスが放されたオブジェクト上にマウスがないときにマウス ボタンが押された場合、このイベントは発生しません。適用対象: Button オブジェクト; Link オブジェクト

onreset イベントは、フォームの [リセット] ボタンがクリックされる (押して離される) ときに発生します。イベント ハンドラーで false を返すことで、フォームがリセットされるのを防ぐことができます。適用対象: フォーム オブジェクト

onresize イベントは、ウィンドウのサイズが変更されるときに発生します。適用対象: window オブジェクト

onsubmit イベントは、フォームの「送信」ボタンがクリックされたとき (押して放したとき) に発生します。このイベントを使用して、フォームの有効性を確認できます。イベント ハンドラーで false を返すことにより、フォームの送信を防ぐことができます。適用対象: フォーム オブジェクト

onunload イベントは、ユーザーがドキュメントを終了する (またはウィンドウを閉じるか、別のページに移動する) ときに発生します。 onloadと同様にHTMLで書きたい場合はタグ内に記述します。一部の Web マスターは、この方法を使用して「アンケート フォーム」をポップアップし、訪問者に入力を「強制」し、訪問者にリンクをクリックするように仕向けます。この「onunload="open..."」メソッドは非常に悪い方法だと思います。ポップアップするウィンドウが多すぎてリソースが不足することもあります。訪問者に言いたいことがあるなら、ウェブページで言うべきですよね?適用対象: ウィンドウ オブジェクト