Событие: свойство currentTarget

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

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

Обратите внимание, что значение currentTarget доступно только в обработчике события. За пределами обработчика события оно будет null. Это означает, что, например, если вы сохраните ссылку на объект Event внутри обработчика события, а затем обратитесь к его свойству currentTarget за пределами обработчика, его значение будет null.

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

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

HTML

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

<div id="parent">
  Click parent
  <div id="child">Click child</div>
</div>

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

• Урок: Поднятие событий