ホームページ > 記事 > ウェブフロントエンド > JS によるイベントの伝播、イベントのデフォルト動作のキャンセル、およびイベントの伝播の防止の詳細な説明

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

韦小宝オリジナル: 2018-01-22 09:58:301930ブラウズ

この記事では主に、イベントの伝播、イベントのデフォルト動作のキャンセル、およびイベントの伝播を防止するための 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 に設定して、イベントのさらなる伝播を防ぎます。

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

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

関連記事