Event Bubbling

<body>
      <table data-element="table">
          <tr data-element="tr">
              <td data-element="td">
                  <p data-element="p">
                      Clicca <b data-element="b">QUI</b> per vedere gli elementi che ricevono l'evento
                  </p>
              </td>
          </tr>
      </table>
      <hr /> <br />
      <p id="results"></p>
  </body>

/* No css */

function logClick(elemento) {
      document.getElementById('results').innerHTML += "Elemento che ha ricevuto l'evento: " + elemento + "<br>";
  }
  const body = document.querySelector('body');
  const results = document.getElementById('results');
  
  body.addEventListener('click', function (event) {// il listener lo mettiamo solo sul body anche se cliccheremo su un elemento interno
      results.innerHTML = "";
      let element = event.target; // variabile inizializzata con l'elemento esatto che è stato cliccato
      console.log('element: ', element);
      while (element && element !== document.body.parentElement) {
          const elementName = element.getAttribute('data-element');
          if (elementName) {
              logClick(elementName);
          } else if (element.tagName.toLowerCase() === 'body') {
              logClick('body');
          }
          element = element.parentElement; //risalita verso l'alto nel DOM
      }
  });