【JavaScript】 「子要素」クリック時も「target」を「親要素」にする

こんにちは、さち です。

今回は、JavaScript で「親要素」に設定したクリックイベント addEventListener で、「子要素」をクリックしたきも target が「親要素」になるようにする方法を書いていきます。

サンプルコード

HTML

<div id="parent">
  <p id="child"></p>
</div>

JavaScript

const parent = document.getElementById('parent');
parent.addEventListener('click', (e)=> {
  alert(e.target.id);
});

id="parent" の要素を取得して、「クリック」されるとその要素の id を「アラート」で表示するイベントを設置しました。

期待する挙動としては、常に「parent」と表示されることです。

結果

1. id="parent" の要素の上で「クリック」すると……
   
2. 「parent」と表示されます。
   
3. しかし、id="child" の要素の上で「クリック」すると……
   
4. 「child」になります。
   

「親要素」をクリックしたときは期待通りの挙動をしますが、「子要素」をクリックしたときは「子要素」の「id」が表示されてしまいます。

「子要素」をクリックしたときも「親要素」の「id」を表示するように、コードを修正していきましょう。

修正したコード

HTML

<div id="parent">
  <p id="child"></p>
</div>

JavaScript

const parent = document.getElementById('parent');
parent.addEventListener('click', (e)=> {
  alert(e.currentTarget.id);
});

target だった部分を currentTarget に変更しました。

結果

1.  id="parent" の要素の上で「クリック」すると……
   
2. 「parent」と表示されます。
   
3. 今度は id="child" の要素の上で「クリック」すると……
   
4. この場合も「parent」になります。期待通りの動作にできました。
   

「target」「currentTarget」の違い

target は、イベントの発火場所（クリックされた場所）を指します。

currentTarget は、イベントの内容が設置されている場所（ addEventListener が設置された場所）を指します。

この違いを適宜使い分けましょう。