【JavaScript】クリックした要素のidを取得する

クリックしたidの要素を取得してゴニョゴニョしたいケースってよくありますよね。

target

hoge.addEventListner('click', (e) => {
  console.log(e.target.id);
})

↑はコンソールにクリックした要素(hoge)のidが出力されます。

targetプロパティはElementではなくEventが持っているもので、上記の例だとイベントが発生した要素『hoge』が該当し、イベントの呼び出し元(hogeオブジェクト)のプロパティ(今回はid)を取得することができます。

今回はid取得ですが、クラスを取得したい場合は『target.className』になります。

それと、似たプロパティの『currentTarget』は『イベントハンドラを登録した要素』です。

Event.target = イベントが発生した要素

Event.currentTarget = イベントハンドラを登録した要素