イベントリスナーの概念に疑問があります。次の2つのコードの違いは何ですか?真/偽のセクションに疑問があります.練習コードの最初のコードを2番目のコードに置き換えても変化はありません.
a.addEventListener("click", modifyText, true);
a.addEventListener("click", modifyText, false);
イベントリスナーの概念に疑問があります。次の2つのコードの違いは何ですか?真/偽のセクションに疑問があります.練習コードの最初のコードを2番目のコードに置き換えても変化はありません.
a.addEventListener("click", modifyText, true);
a.addEventListener("click", modifyText, false);
true および false inaddEventListener
は、イベントをキャプチャする必要があるかどうかを指定するブール値です。
構文と詳細は次のとおりです。
object.addEventListener (eventName, function, useCapture);
eventName:リッスンするイベントの名前を指定する文字列。このパラメーターは大文字と小文字が区別されます。
function:イベントが発生したときに呼び出されるイベント リスナー関数を表します。イベントが発生すると、イベント オブジェクトが初期化され、最初のパラメーターとしてイベント ハンドラーに渡されます。イベント オブジェクトのタイプは、現在のイベントによって異なります。
useCapture:イベントをキャプチャする必要があるかどうかを指定するブール値。次のいずれかの値:
false -> Register the event handler for the bubbling phase.
true -> Register the event handler for the capturing phase.
バブリングとキャプチャ フェーズ:
バブリング:イベント オブジェクトは、ターゲットの親から始まり、defaultView で終わる、逆の順序でターゲットの祖先に伝播します。この段階はバブリング段階とも呼ばれます。このフェーズに登録されたイベント リスナーは、イベントがターゲットに到達した後にイベントを処理する必要があります。
キャプチャ:イベント オブジェクトは、ターゲットの祖先を介して defaultView からターゲットの親に伝播する必要があります。このフェーズは、キャプチャ フェーズとも呼ばれます。このフェーズに登録されたイベント リスナーは、イベントがターゲットに到達する前にイベントを処理する必要があります。
イベント フローの詳細については、 DOM イベント アーキテクチャを参照してください。
MDN onaddEventListener
など、いくつかのドキュメントをご覧ください。
target.addEventListener(type, listener[, useCapture]);
useCapture
true の場合、useCapture は、ユーザーがキャプチャを開始したいことを示します。キャプチャを開始した後、指定されたタイプのすべてのイベントは、登録されたリスナーにディスパッチされてから、DOM ツリー内のその下にある EventTarget にディスパッチされます。ツリーを上方にバブルするイベントは、キャプチャを使用するように指定されたリスナーをトリガーしません。詳細な説明については、DOM レベル 3 イベントを参照してください。このパラメーターは、すべてのブラウザー バージョンで省略可能ではないことに注意してください。指定しない場合、useCapture は false です。
したがって、基本的には、イベントがキャプチャまたはイベント処理のバブル フェーズで処理されるかどうかを決定します。
要素の親 (または子) に同様のイベントが関連付けられていない限り、実質的な違いはありません。