JS によるイベントの伝播、イベントのデフォルト動作のキャンセル、およびイベントの伝播の防止の詳細な説明

この記事では主に、イベントの伝播、イベントのデフォルト動作のキャンセル、およびイベントの伝播を防止するための JS について、イベント処理プログラムの戻り値の呼び出しシーケンスを通じて説明します。JS に興味のある友人は、この記事を参照してください。

1. イベントハンドラーの戻り値

通常、戻り値 false は、このイベントに関連するデフォルトの操作を実行しないようにブラウザーに指示します。たとえば、フォーム送信ボタンの onclick イベント ハンドラは false を返すことでブラウザがフォームを送信するのを防ぐことができ、a タグの onclick イベント ハンドラは false を返すことで href ページへのジャンプを防ぐことができます。同様に、入力フィールドの onkeypress イベント ハンドラーは、ユーザーが不適切な文字を入力した場合に false を返してキーボード入力をフィルターできます。
イベント ハンドラーの戻り値は、属性を通じて登録されたハンドラーに対してのみ意味を持ちます。

2. 呼び出しシーケンス

ドキュメント要素またはその他のオブジェクトは、指定されたイベント タイプに対して複数のイベント ハンドラーを登録できます。適切なイベントが発生すると、ブラウザは次のルールに従ってすべてのイベント ハンドラーを呼び出す必要があります:

オブジェクト プロパティまたは HTML 属性の設定によって登録されたハンドラーが常に最初に呼び出されます。
addEventListener() を使用して登録されたハンドラーは、登録された順序で呼び出されます。
attachEvent() を使用して登録されたハンドラーは任意の順序で呼び出すことができるため、コードは呼び出しの順序に依存すべきではありません

3. イベントの伝播

ターゲット要素に登録されたイベント ハンドラー関数を呼び出した後、ほとんどのイベントは DOM ツリー ルートに「バブル」されます。ターゲットの親要素のイベント ハンドラを呼び出してから、ターゲットの親要素に登録されているイベント ハンドラを呼び出します。これは Document オブジェクトまで続き、最後に Window オブジェクト まで続きます。

ドキュメント要素で発生するほとんどのイベントはバブルしますが、注目すべき例外はフォーカス、ブラー、スクロール イベントです。ドキュメント要素の読み込みイベントはバブルしますが、Document オブジェクトでのバブルは停止し、Window オブジェクトには伝播しません。 Window オブジェクトのロード イベントは、ドキュメント全体がロードされた場合にのみトリガーされます。

4. デフォルトのイベント動作をキャンセルし、イベントの伝播を防止します

addEventListener() をサポートするブラウザでは、イベント オブジェクトのPreventDefault() メソッドを呼び出すことで、イベントのデフォルトのアクションをキャンセルできます。 IE9 より前の IE では、イベント オブジェクトの returnValue プロパティを false に設定することで、同じ効果を得ることができます。次のコードは、イベントをキャンセルする 3 つの手法を組み合わせたものです:

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

イベントのキャンセルに関連するデフォルトの操作はイベント キャンセルの 1 つだけであり、イベントの伝播をキャンセルすることもできます。 addEventListener() をサポートするブラウザでは、イベント オブジェクトの stopPropagation() メソッドを呼び出して、イベントが伝播し続けるのを防ぐことができます。同じオブジェクトに他のハンドラーが定義されている場合、残りのハンドラーは引き続き呼び出されますが、他のオブジェクトのイベント ハンドラーは stopPropagation() の呼び出し後に呼び出されません。

IE9 より前の IE は stopPropagation() メソッドをサポートしていませんが、イベント オブジェクトの cancelBubble プロパティを true に設定して、イベントのさらなる伝播を防ぎます。

さて、上記は編集者がまとめた内容です。皆さんのお役に立てれば幸いです〜

関連おすすめ:

JavaScriptを使用したアラーム効果音の詳細な説明

JavaScriptの優先キューと回覧キューの例 詳細な説明

3 レベルのカスケード特殊効果の JavaScript 実装の共有例

以上がJS によるイベントの伝播、イベントのデフォルト動作のキャンセル、およびイベントの伝播の防止の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。