【JavaScript入門】e.targetとe.currentTargetの違い

この記事ではe.targetとe.currentTargetの違いについて解説していきます。

`e.target`

e.targetは、イベントが発生した要素を指します。
次のサンプルを見てください。

「あいうえお」をクリックするとその背景色が赤くなります。
「かきくけこ」や「さしすせそ」も同様にクリックするとその背景色が赤くなります。
e.targetとすることで、クリックしたp要素が対象となり、そのp要素の背景色を変更しているのです。

HTML

<div id="ele">
  <p>あいうえお</p>
  <p>かきくけこ</p>
  <p>さしすせそ</p>
</div>

CSS

.red{
 background-color:red;
}

document.getElementById('ele').addEventListener('click',function(e){
  e.target.classList.toggle('red');
})

e.currentTargetは、イベントハンドラを登録している要素を指します。
次のサンプルを見てください。

「あいうえお」「かきくけこ」「さしすせそ」のいずれの要素をクリックすると全体の背景色が青くなります。
クリックイベントを登録しているのはこれらのp要素の親要素であるdiv要素なので、e.currentTargetとすることで、div要素が対象となり、div要素の背景色を変更しているのです。

HTML

<div id="ele2">
  <p>あいうえお</p>
  <p id="ppp">かきくけこ</p>
  <p>さしすせそ</p>
</div>

CSS

.skyblue{
 background-color:skyblue;
}

document.getElementById('ele2').addEventListener('click',function(e){
  e.currentTarget.classList.toggle('skyblue');
})

クリックイベントの場合、以下のようになります。

`e.target`	`e.currentTarget`
クリックした要素が対象になる	クリックイベントを定義した要素が対象になる

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！