JS のイベントに対する詳細な回答 (グラフィック チュートリアル)

この記事では、主にイベントのJS伝播、イベントのデフォルト動作のキャンセル、およびイベント伝播の防止について説明します。必要な方は参照してください。 . イベントハンドラー 戻り値

通常、戻り値 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

クライアントがインターネットにアクセスできるかどうかの判定を詳しく解説

js

/cssファイルを動的に操作する方法とは

sassを使うための設定方法vue の project_vue .
js

以上がJS のイベントに対する詳細な回答 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。