<div data-name="div" class="log">
  <table data-name="table" class="log">
    <tr data-name="tr" class="log">
      <td data-name="td" class="log">
        <button data-name="button" class="log">
          Kliknij mnie
        </button>
      </td>
    </tr>
  </table>
</div>
function eventConsole(event){
  console.group(this.dataset.name)
  console.log(`target ${event.target.dataset.name}`)
  console.log(`currentTarget ${event.currentTarget.dataset.name}`)
   console.log(`eventPhase ${event.eventPhase}`)
  
  console.groupEnd()
}

Array.from(
document.getElementsByClassName("log")
).forEach(object=>{
  object.addEventListener("click", eventConsole);
})

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.