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

Question

[ArtemEfremov]

Есть код:

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

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

Answer 1

[0xD34F]

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

или

document.querySelectorAll('div button').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(e.currentTarget.closest('div').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(). Более вероятны проблемы при изменении вёрстки.