e.targetで要素を取得出来ない時の原因 - JavaScript

はじめに

下記のようにaddEventListenerを設定した要素を取得するとします。

const Elm = document.querySelector('#hoge')
Elm.addEventListener('click', (event) => {
      let target = event.target
      console.log(target)
})

通常、console.logに出力される内容は、addEventListenerを設定した要素の#hogeになると思いますが、場合によっては「#hogeの子要素」を出力してしまうことがあります。

では、どのようなケースだと、上記のようなことが起きるのでしょうか。

addEventListenerのクリックの処理をアロー関数で書くと、クリックした要素がevent.targetに格納される

addEventListenerでクリックの処理をアロー関数で記述すると、「クリックした要素」がevent.targetに格納されます。

この説明だけ聞くと、「普通じゃない？」と思いますが、注目して欲しいのは「クリックした要素を格納してしまう」という点です。

下記のようなコードがあるとします。

<div id="wrap">
  <p>text, text, text</p>
</div>

const Elm = document.querySelector('#wrap')
Elm.addEventListener('click', (event) => {
      let target = event.target
      console.log(target)
})

この時、サイト上で<p>タグのテキスト部分をクリックすると、event.targetで返ってくる値は、<div id="wrap">ではなく、<div id="wrap">の子要素の<p>になってしまいます。

これは、addEventListenerをアロー関数で書いてしまうと起きる現象です。

対策：「event.currentTarget」を使おう

決して、「addEventListenerを使う時はアロー関数を使ってはいけない」という訳ではありません。

クリックした時に、addEventListenerを設定した要素を取得するにはevent.targetではなくevent.currentTargetを使えばこの問題は解決します。