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.

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

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

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

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

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

currentTarget と target

この例は、currentTargettargetの違いを示しています。

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.currentTargetevent.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②

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
currentTarget

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報