Распространение событий с несколькими вложенными детьми

Question

В следующем коде, когда я нажимаю на любой элемент, я вижу только одно событие (зарегистрировано в консоли) за клик. Из того, что я прочитал, я подумал, что должен увидеть консольный журнал для каждого элемента, под которым произошел щелчок мыши из-за распространения событий и пузырей. Похоже, что я получаю событие только для самого глубоко вложенного элемента.

Как я могу определить, например, при нажатии на кнопку, какой идентификатор кнопки была нажата, поскольку целью события всегда является дочернее изображение. Нужно ли мне просто жить, зная структуру HTML и запрашивая e.target.parentNode, или есть более элегантный способ доступа к промежуточному узлу в дереве распространения событий?

document.getElementById('parent')
.addEventListener('click', function(e) {
  console.log(e.target.nodeName + ' ' + e.target.id);
});

#parent {
  border: thin black solid;
  width: 200px;
  height: 200px;
}

#child1, #child2 {
  border: thin green solid;
  width: 100px;
  height: 100px;
}

#btn1, #btn2 {
  border: thin red solid;
  width: 50px;
  height: 50px;
}

#image1, #image2 {
  width: 100%;  
  height: 100%;
}

<div id="parent">
  <div id="child1">
    <button id="btn1">
      <img id="image1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </button>
  </div>
  <div id="child2">
    <button id="btn2">
      <img id="image2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </button>
  </div>  
</div>