Доступное только для чтения свойствоcurrentTarget интерфейсаEvent указывает на элемент, к которому был прикреплён обработчик события.

Это не всегда будет тот же элемент, на котором сработало событие, потому что событие могло быть вызвано на потомке элемента, а затемвсплыть выше к элементу с обработчиком. Элемент, на котором было вызвано событие, можно получить с помощьюEvent.target.

Значение

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

Примеры

currentTarget и target

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

HTML

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

<div>  Нажатие внутри родительского элемента  <div>Нажатие внутри дочернего элемента</div></div><button>Сбросить</button><pre></pre>

button,div,pre {  margin: 0.5rem;}div {  padding: 1rem;  border: 1px solid black;}

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 указывает на родительский элемент, потому что к нему прикреплён обработчик события.

Спецификации

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

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

• Сравнение разных Event Targets
• Всплытие и перехват событий