Как получить непосредственно тот элемент, для которого установлен обработчик события?

Question

[Roman Sokolov]

На стороннем сайте есть таблица, из которой нужно получить данные при клике мышью по одной из строк.
Добавил к элементам tr обработчик нажатия мышью.
Структура элементов внутри tr:

<tr>
  <td>
    <span>
      <span>
         текст содержащий данные
      </span>
    </span>
  </td>
</tr>

При нажатии в event.target попадает попадает либо внутренний span, либо внешний внутри td. Поэтому tr я могу получить как

tr = event.target.parentNode.parentNode

или

tr = event.target.parentNode.parentNode.parentNode

Можно ли непосредственно получать тот элемент (tr), для которого я привязываю обработчик?

Answer 1

[0xD34F]

Если прямо отвечать на спрошенное - currentTarget.

Но, возможно (если содержимое таблицы может динамически дополняться), было бы разумнее вешать обработчик не на tr, а выше - на tbody, или саму таблицу, если элементов tbody несколько или надо также слушать клики и на строках внутри thead/tfoot. А в обработчике уже пытаться подняться от event.target к элементу строки:

table.addEventListener('click', e => {
  const tr = e.target.closest('tbody tr');
  if (tr) {
    // ...
  }
});

Comments

[Roman Sokolov]

Благодарю