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.

Значение

EventTarget, представляющий объект, к которому прикреплён текущий обработчик событий.

Примеры

currentTarget и target

Этот пример иллюстрирует разницу между currentTarget и target.

HTML

На странице есть «родительский» <div>, содержащий «дочерний» <div>.

html
<div id="parent">
  Нажатие внутри родительского элемента
  <div id="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②

Совместимость с браузерами

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

Смотрите также