event.targetとevent.currentTargetの違い

背景

ネストしたHTML要素の親要素に対してイベントハンドラのコールバック関数内の処理を付与した状態で、その子要素をクリックした。
すると、親要素に対して付与したはずのイベントハンドラのコールバック関数内の処理が、子要素に対してのみ実行された。

>>>挙動の参考<<<

どうして親要素に付与したイベント処理が、子要素だけに実行されたか？
という疑問が生じたので、調べてみた。

どうして親要素に付与したイベントハンドラのコールバック関数内で処理を行う対象が、子要素になったのか？

これには2つの理由があり、分解して説明すると、、、

Q. 親要素に付与したイベントハンドラのコールバック関数内の処理が実行される理由
　→　キャプチャリングとバブリングの影響により、子要素をクリックした場合でも、親要素に付与されたイベントハンドラのコールバック関数内の処理が実行された

※ 本記事では、キャプチャリングとバブリングについては触れません
　>>>キャプチャリングとバブリングの参考サイト<<<

Q. 子要素が、親要素に付与したイベントハンドラのコールバック関数内で処理を行う対象となった理由
　→　処理の実行先をevent.targetとしていた場合、event.targetはイベントを発生させた要素指すため、子要素でイベントが発生すると、event.targetは子要素を指す。

結局どう解決したのか

event.currentTargetを使うことで解決

event.targetとevent.currentTargetの違い

event.target：イベントを発生させた要素を指す
event.currentTarget：イベントハンドラが登録されている要素を指す

event.targetを使った場合の挙動例

HTMLタグの構造が

<div class="parent">
  親要素
  <div>子要素</div>
</div>

となっているとする。

親要素に

const parentElm = document.querySelector('.parent');
parentElm.addEventListener('click', event => {
  event.target.setAttribute('style', 'background-color: blue;');
})

をセットする。
この状態で子要素をクリックすると、子要素のbackground-colorだけがblueとなる。
event.targetには**イベントを発生させた要素(= 子要素)**が入るため。

event.currentTargetを使った場合の挙動例

親要素に

const parentElm = document.querySelector('.parent');
parentElm.addEventListener('click', event => {
  event.currentTarget.setAtrribute('style', 'background-color: blue;');
})

をセットする。
この状態で子要素をクリックしても
常に親要素のbackground-colorがblueとなる。
currentTargetには、イベントハンドラを**登録した要素(= 親要素)**が入る。

終わり

ありがとうございました！