JavaScript イベント処理における「currentTarget」と「target」の違いは何ですか?

JavaScript イベントの currentTarget プロパティと target プロパティの区別

JavaScript でイベントを処理する場合、currentTarget と target の区別を理解することが重要ですプロパティ。これらのプロパティは、イベントの伝播メカニズムに関する貴重な洞察を提供し、さまざまなシナリオで重要な役割を果たします。

イベントの伝播とプロパティの違い

デフォルトでは、JavaScript のイベントはバブリングに従います。伝播モデル。これは、イベントが特定の要素から発生し、ドキュメント オブジェクトに到達するまでその親要素を介して上方に伝播することを意味します。この伝播中、target プロパティは最初にイベントをトリガーした要素を参照し、currentTarget プロパティはイベント リスナーが接続されている要素を識別します。

Example

2 つのネストされた div を含む HTML ドキュメントを考えます:

<div>

次に、イベント リスナーをアタッチします。外側の div へ:

document.getElementById("div-container").addEventListener("click", function(event) {
  console.log(`Target: ${event.target.id}, CurrentTarget: ${event.currentTarget.id}`);
});

内側の div をクリックすると、target プロパティと currentTarget プロパティの両方が「div-inner」を出力し、イベントが内側の div から発生したことを示します。ただし、外側の div をクリックすると、イベント リスナーが外側の div にアタッチされているため、currentTarget プロパティは引き続き「div-container」を出力しますが、クリック イベントが外側の div で直接トリガーされないため、target プロパティは null になります。 div.

使用例

の使用target:

• イベントを引き起こした特定の要素の特定
• イベント処理をネスト構造内の特定の要素に制限する
• 要素の正確な位置の決定ページ

の使用法currentTarget:

• イベント リスナーがアタッチされている要素を決定する
• さらなるバブリングを停止するか、追加のイベントをキャプチャすることでイベントの伝播を制御する
• イベント委任を実装する単一のイベント リスナーで複数の要素のイベントを処理する場合

以上がJavaScript イベント処理における「currentTarget」と「target」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。