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>
があります。
<div id="parent">
parent をクリック
<div id="child">child クリック</div>
</div>
<button id="reset">リセット</button>
<pre id="output"></pre>
JavaScript
イベントハンドラーは親要素に装着されています。イベントハンドラーは、event.currentTarget
と event.target
の値をログ出力します。
「リセット」ボタンも備えており、これは例を再読み込みするだけです。
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 GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
currentTarget |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support