PR
スポンサーリンク

【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 = イベントハンドラを登録した要素

タイトルとURLをコピーしました