ターゲットフェーズ

（イベント）

意味イベントの対象段階

ターゲットフェーズとは？

イベント伝播の中間の段階。イベントは実際のイベント対象（クリックされた要素など）で処理されます。

ターゲットフェーズの具体的な使い方

ターゲットフェーズでのイベント処理例

<div id="parent" style="padding: 20px; background-color: #f0f0f0;">
  親要素
  <button id="target">ターゲット要素</button>
</div>
<div id="log"></div>

<script>
const parent = document.getElementById('parent');
const target = document.getElementById('target');
const log = document.getElementById('log');

parent.addEventListener('click', function(e) {
  log.innerHTML += `親要素: ${e.eventPhase === 1 ? 'キャプチャリング' : 'バブリング'}フェーズ (currentTarget: ${e.currentTarget.id}, target: ${e.target.id})<br>`;
}, true);

parent.addEventListener('click', function(e) {
  log.innerHTML += `親要素: ${e.eventPhase === 1 ? 'キャプチャリング' : 'バブリング'}フェーズ (currentTarget: ${e.currentTarget.id}, target: ${e.target.id})<br>`;
});

target.addEventListener('click', function(e) {
  log.innerHTML += `ターゲット要素: ターゲットフェーズ (currentTarget: ${e.currentTarget.id}, target: ${e.target.id})<br>`;
});
</script>

親要素とターゲット要素にイベントリスナーを設定し、各フェーズでのcurrentTargetとtargetの違いを確認します。ターゲットフェーズではcurrentTargetとtargetが同じになります。

ターゲットフェーズに関するよくある質問

Q. ターゲットフェーズとは？

A. ターゲットフェーズは、イベントがイベントの発生元の要素（ターゲット）に到達した時の段階です。キャプチャリングフェーズの後、バブリングフェーズの前に発生します。

Q. e.targetとe.currentTargetの違いは？

A. e.target はイベントが発生した元の要素を指し、e.currentTarget は現在イベントが処理されている要素を指します。ターゲットフェーズでは、これらは通常同じ要素を指しますが、バブリングフェーズでは異なる場合があります。

Q. ターゲットフェーズの重要性は？

A. ターゲットフェーズは、イベントが実際に発生した要素で処理を行うのに適しています。例えば、クリックされた特定の要素に対して何かアクションを起こしたい場合に重要です。

ターゲットフェーズが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのターゲットフェーズやaddEventListener()、resize、touchend、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。