<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);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.