Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. Web APIs
  3. Event
  4. currentTarget

Event: currentTarget property

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.

Note: This feature is available inWeb Workers.

ThecurrentTarget read-only property of theEvent interface identifies the element to which the event handler has been attached.

This will not always be the same as the element on which the event was fired, because the event may have fired on a descendant of the element with the handler, and thenbubbled up to the element with the handler. The element on which the event was fired is given byEvent.target.

Note that the value ofcurrentTarget is only available in a handler for the event. Outside an event handler it will benull. This means that, for example, if you take a reference to theEvent object inside an event handler and then access itscurrentTarget property outside the event handler, its value will benull.

Value

AnEventTarget representing the object to which the current event handler is attached.

Examples

currentTarget versus target

This example illustrates the difference betweencurrentTarget andtarget.

HTML

The page has a "parent"<div> containing a "child"<div>.

html
<div>  Click parent  <div>Click child</div></div><button>Reset</button><pre></pre>
button,div,pre {  margin: 0.5rem;}div {  padding: 1rem;  border: 1px solid black;}

JavaScript

The event handler is attached to the parent. It logs the value ofevent.currentTarget andevent.target.

We also have a "Reset" button that just reloads the example.

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());

Result

If you click inside the child<div>, thentarget identifies the child. If you click inside the parent<div>, thentarget identifies the parent.

In both cases,currentTarget identifies the parent, because that's the element that the handler is attached to.

Specifications

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

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp