Как узнать, в каком div была нажата кнопка?

Question

[ArtemEfremov]

Есть код:

<div id="1">
 <button>Тестовая кнопка</button>
</div>

Как получить ID div'а, если кнопка была нажата? Именно, чтобы данные при нажатии содержали id блока в котором была нажата кнопка.

Answer 1

[0xD34F]

О каких кнопках идёт речь и где они находятся:

const containerSelector = 'div';
const buttonSelector = `${containerSelector} button`;

Обработчик клика может быть делегированным:

document.addEventListener('click', e => {
  const container = e.target.closest(buttonSelector)?.closest(containerSelector);
  if (container) {
    console.log(container.id);
  }
});

Или можно слушать клики непосредственно на кнопках:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  let container = this;
  while (!(container = container.parentNode).matches(containerSelector)) ;
  console.log(container.getAttribute('id'));
});

Comments

[ArtemEfremov]

Спасибо огромное, помогло!

[dmitry-toster]

0xD34F извините, а что означает ?.id
Редактор ругается на этот синтаксис, но код при этом продолжает работать

[Mazino]

dmitry-toster, это типо глобальная перегрузка для getter'а объекта.

obj = {}
obj.prop.data

Раннее такой код бросал исключение:

Uncaught TypeError: Cannot read property 'data' of undefined

это вроде относительно новый синтаксис, из последних обновлений es
поскольку obj.prop == undefined
перегрузка getter'а делает if prop exitst, и в случае неудачи вернет undefined
что-то подобное можно сделать с помощью Proxy api.
вариант вроде

const key = 'data'
obj = { content: { data: 123 }}
obj.content?.[key]

тоже возможен, главное про точку после ? незабыть

Answer 2

[aidarDev]

Comments

[FinGanapre]

Вешать отдельный обработчик на каждую кнопку не есть хороший подход. Лучше ловить через всплытие.

Answer 3

[Олег]

Comments

[FinGanapre]

Вешать отдельный обработчик на каждую кнопку не есть хороший подход. Лучше ловить через всплытие.
Использование parentNode уже, чем closest(). Более вероятны проблемы при изменении вёрстки.