Event: currentTarget プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

currentTarget は Event インターフェイスの読み取り専用プロパティで、イベントが DOM を走査する際の、イベントの現在のターゲットを特定します。これは常にイベントハンドラーが装着されている要素を指し、Event.target とは対照的に、イベントが発生した要素やその子孫である可能性のある要素を特定します。

値

EventTarget で、現在のイベントハンドラーが装着されているオブジェクトを表します。

例

Event.currentTarget は、複数の要素に同じイベントハンドラーを割り当てるときに使用すると面白いです。

js
function hide(e) {
  e.currentTarget.style.visibility = "hidden";
  console.log(e.currentTarget);
  // この関数がイベントハンドラーとして使用されるとき： this === e.currentTarget
}

const ps = document.getElementsByTagName("p");

for (const p of ps) {
  // クリックされた <p> 要素を隠す
  p.addEventListener("click", hide, false);
}

document.body.addEventListener("click", hide, false);

// 周辺をクリックすると段落が消えます。

メモ: イベント処理中だけ event.currentTarget の値は利用可能です。 もし console.log() で event オブジェクトを変数に格納し、コンソールで currentTarget キーを探すと、その値は null となります console.log(event.currentTarget) を使ってコンソールで表示するか、 debugger 文を使ってコードの実行を一時停止し、 event.currentTarget の値を表示させる必要があります。

仕様書

Specification
DOM Standard
# ref-for-dom-event-currenttarget②

ブラウザーの互換性

BCD tables only load in the browser

関連情報