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>
.
<div id="parent">
Нажатие внутри родительского элемента
<div id="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 Standard # ref-for-dom-event-currenttarget② |
Совместимость с браузерами
BCD tables only load in the browser