Как получить только первый дочерний элемент в вложенности (event.target) без дополнительных условий?

Question

[Junior Development]

При клике на кнопку нужно получить id только первого дочернего элемента.
Если мы кликнем по рисунку в кнопке, то соответственно нужного id не получаем.
Как полчить только первый дочерний элемент в вложенности без доплонительных условий?

https://codepen.io/studydev/pen/YzWodYa

<div class="buttons">
	<button class='button' id='red'> red
		<img src="https://printplanet.com/data/avatars/o/21/21249.jpg?1576919580" alt="">
		</button>
	<button class='button' id='blue'> blue
		<img src="https://printplanet.com/data/avatars/o/21/21249.jpg?1576919580" alt="">
		</button>
	<button class='button' id='green'> greeb
		<img src="https://printplanet.com/data/avatars/o/21/21249.jpg?1576919580" alt="">
		</button>
</div>

const buttons = document.querySelector('.buttons');

	buttons.addEventListener('click', (event) => {
		console.log(event.target.id);
	});

Answer 1

[0xD34F]

Где кнопки находятся, что за кнопки, что делать при клике:

const container = document.querySelector('.buttons');
const buttonSelector = '.button';
const onButtonClick = button => console.log(button.id);

Делегирование, обработчик клика добавляем контейнеру с кнопками. Пробуем найти у элемента, где случился клик, предка, который является кнопкой:

container.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    onButtonClick(button);
  }
});

Или, добавляем обработчик клика каждой кнопке индивидуально. В этом случае кнопка будет доступна без каких-либо дополнительных телодвижений, т.к. ссылка на элемент, к которому подключен обработчик события, является свойством объекта события:

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => onButtonClick(e.currentTarget));