このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2015年7月.
メモ: この機能はウェブワーカー内で利用可能です。
currentTarget はEvent インターフェイスの読み取り専用プロパティで、イベントハンドラーが取り付けられた要素を識別します。
これは、イベントが発行された要素と常に同じであるとは限りません。イベントは、ハンドラーを持つ要素の子孫で発生し、ハンドラーを持つ要素にバブルアップされる可能性があるからです。イベントが発行された要素は、Event.target で指定されます。
なお、currentTarget の値はイベントハンドラー内でのみ利用できます。イベントハンドラー外ではnull となります。つまり、例えばイベントハンドラー内でEvent オブジェクトの参照を取得し、その後イベントハンドラー外でそのcurrentTarget プロパティにアクセスすると、その値はnull となります。
値
EventTarget で、現在のイベントハンドラーが装着されているオブジェクトを表します。
例
currentTarget と target
この例は、currentTargetとtargetの違いを示しています。
HTML
このページには、 "parent" の<div> の中に "child" の<div> があります。
<div> parent をクリック <div>child クリック</div></div><button>リセット</button><pre></pre>button,div,pre { margin: 0.5rem;}div { padding: 1rem; border: 1px solid black;}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② |