Event: свойство currentTarget
Доступное только для чтения свойство 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