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

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

e.target

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

See the Pen
target1 by shiakisudev (@shiakisu)
on CodePen.

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

HTML

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

CSS

.red{
 background-color:red; 
}

js

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

e.currentTarget

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

See the Pen
currentTarget1 by shiakisudev (@shiakisu)
on CodePen.

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

HTML

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

CSS

.skyblue{
 background-color:skyblue; 
}

js

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

まとめ

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