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 July 2015.

メモ: この機能はウェブワーカー内で利用可能です。

currentTarget は Event インターフェイスの読み取り専用プロパティで、イベントハンドラーが取り付けられた要素を識別します。

これは、イベントが発行された要素と常に同じであるとは限りません。イベントは、ハンドラーを持つ要素の子孫で発生し、ハンドラーを持つ要素にバブルアップされる可能性があるからです。イベントが発行された要素は、 Event.target で指定されます。

なお、currentTarget の値はイベントハンドラー内でのみ利用できます。イベントハンドラー外では null となります。つまり、例えばイベントハンドラー内で Event オブジェクトの参照を取得し、その後イベントハンドラー外でその currentTarget プロパティにアクセスすると、その値は null となります。

値

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

例

currentTarget と target

この例は、currentTargetとtargetの違いを示しています。

HTML

このページには、 "parent" の <div> の中に "child" の <div>　があります。

html
<div id="parent">
  parent をクリック
  <div id="child">child クリック</div>
</div>

<button id="reset">リセット</button>
<pre id="output"></pre>

JavaScript

イベントハンドラーは親要素に装着されています。イベントハンドラーは、event.currentTarget と event.target の値をログ出力します。

「リセット」ボタンも備えており、これは例を再読み込みするだけです。

js
const output = document.querySelector("#output");
const parent = document.querySelector("#parent");
parent.addEventListener("click", (event) => {
  const currentTarget = event.currentTarget.getAttribute("id");
  const target = event.target.getAttribute("id");
  output.textContent = `Current target: ${currentTarget}\n`;
  output.textContent += `Target: ${target}`;
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());

結果

子要素の <div> 内をクリックすると、 target は子要素を示します。親要素の <div> 内をクリックすると、 target は親要素を示します。

どちらの場合も、 currentTarget は親を特定します。ハンドラーが装着されている要素だからです。

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報