Давайте прямо к этому…

event.target — это свойство события DOM в JavaScript. Он относится к фактическому элементу DOM, вызвавшему событие.

Например, если у вас есть прослушиватель событий, прикрепленный к родительскому элементу, скажем, div, который прослушивает клики, event.target вернет конкретный дочерний элемент, на который был нажат.

Вот еще один пример, иллюстрирующий это:

<div id="parent">
  <p id="child1">Child 1</p>
  <p id="child2">Child 2</p>
</div>

<script>
const parent = document.getElementById("parent");

parent.addEventListener("click", (event) => {
  console.log(event.target);
});
</script>

В приведенном выше примере, если вы щелкнете по первому дочернему элементу, #child1, консоль выведет <p id="child1">Child 1</p>. Если бы вы щелкнули второй дочерний элемент, #child2, консоль вывела бы <p id="child2">Child 2</p>

Важно отметить, что event.target всегда относится к фактическому элементу, вызвавшему событие, даже если прослушиватель событий привязан к другому элементу. В приведенном выше примере, даже несмотря на то, что прослушиватель событий привязан к родительскому элементу, event.target по-прежнему правильно идентифицирует дочерний элемент, по которому был сделан щелчок.

Следующий раунд…

event.currentTarget — это свойство события DOM в JavaScript, которое ссылается на элемент, которому в данный момент отправляется событие. Он представляет собой элемент, к которому прикреплен прослушиватель событий, и обычно используется в сценариях всплытия или захвата событий, где событие может быть распространено от дочернего элемента к его родительскому.

Вот пример:

<div id="parent">
  <p id="child">Click me!</p>
</div>

<script>
  const parent = document.getElementById("parent");
  const child = document.getElementById("child");

  parent.addEventListener("click", (event) => {
    console.log("currentTarget:", event.currentTarget);
    console.log("target:", event.target);
  });

  child.addEventListener("click", (event) => {
    console.log("currentTarget:", event.currentTarget);
    console.log("target:", event.target);
  });
</script>

Если вы нажмете на элемент child, вывод будет таким:

currentTarget: [object HTMLParagraphElement]
target: [object HTMLParagraphElement]
currentTarget: [object HTMLDivElement]
target: [object HTMLParagraphElement]

Вы можете заметить, что event.currentTarget возвращает элемент, к которому присоединен прослушиватель событий (child или parent), а event.target возвращает фактический элемент, на который был нажат щелчок (child). Это позволяет по-разному обрабатывать события в зависимости от источника события.

Попробуйте это визуальное объяснение…

Представьте, что в 8 лет у вас есть ящик для игрушек, и вы хотите знать, когда кто-то играет с игрушками внутри него. Ящик для игрушек похож на event.currentTarget — это то, на что вы обращаете внимание.
Игрушка, с которой человек играет внутри коробки, похожа на event.target. Это конкретная вещь, которая вызывает событие (в данном случае кто-то играет с игрушкой).

Итак, event.currentTarget похож на ящик для игрушек, а event.target похож на игрушку, с которой играет человек. Таким образом, вы можете знать не только, что кто-то играет с игрушками, но и с какой конкретной игрушкой они играют!

Спасибо, что прочитали, адиос…