Різниця між event.target та event.currenttarget у JavaScript

В JavaScript, працюючи з подіями, пропси event.target та event.currentTarget часто використовуються. Незважаючи на схожість, вони мають різні призначення і можуть повертати різні елементи.

Визначення

event.target — елемент, де подія насправді відбулася. Це може бути вкладений елемент.
event.currentTarget — елемент, до якого прикріплено обробник подій (той, до якого ви прикріпили addEventListener).

Приклад

html

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

javascript

const parent = document.getElementById("parent");

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

Якщо ви натиснете кнопку #child, тоді:

event.target буде <button id="child">
event.currentTarget буде <div id="parent">

Оскільки подія відбулася на кнопці, але обробник прикріплений до батьківського елемента (parent).

Коли це використовується?

event.target — корисно, коли ви займаєтеся делегуванням подій і хочете визначити, на якому елементі сталася подія.
event.currentTarget — зручно використовувати, коли вам потрібно отримати елемент, до якого прикріплений обробник, особливо всередині універсального обробника.

Корисний приклад делегування

javascript

document.querySelector("#list").addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    console.log("Clicked item:", e.target.textContent);
  }
});

Тут event.target — це конкретний <li>, на який було натиснуто. Це дозволяє відстежувати кліки на динамічно створених елементах.

Підсумок

Властивість	Що вона повертає	Коли використовувати
`event.target`	Елемент, де відбулася подія	Під час делегування або відстеження джерела елемента
`event.currentTarget`	Елемент, до якого прикріплений обробник	Коли вам потрібно знати, до чого прикріплено `addEventListener`

Пам'ятайте:

target — де це сталося
currentTarget — де це обробляється

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Різниця між event.target та event.currenttarget у JavaScript

#Визначення

#Приклад

#Коли це використовується?

#Корисний приклад делегування