JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boots"></div>

CSS

.push {
  outline: dashed 1px gray;
  padding: 5px;
  margin: 5px;
}

button span {
  color: red;
}

JavaScript

const container = document.querySelector(".boots"); // родительский блок
container.addEventListener('click', myClickHandler); // слушаем клики на родителе

createButtons(container, 6);


function myClickHandler(evt) {
  console.clear();
  // одновременно могут подходить несколько условий
  if (evt.target.closest('.push')) {
    console.log("клик по любому элементу внутри .push");
  }
  if (evt.target.matches('button span')) {
    console.log("клик по span");
  }
  if (evt.target.matches('.b1')) {
    console.log("кнопка нажми");
  }
  if (evt.target.matches('.b2')) {
    console.log("кнопка нажми другое, но без учета спана");
  }
  if (evt.target.closest('.b2')) {
    console.log("кнопка нажми другое, с учетом спана");
  }
  
}

function createButtons(container, buttonsCount) {
  let html = '';
  for (let i = 0; i < buttonsCount; i++) {
    html += `<div class="push" data-num="${i}">
       <button class="b1">нажми</button>
       <button class="b2">нажми <span>другое</span></button>
    </div>`;
  }
  container.innerHTML = html;
}