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 September 2021.

Доступное только для чтения свойство 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 Standard
# ref-for-dom-event-currenttarget②

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

BCD tables only load in the browser

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