JSFiddle - React, Tailwind, and code Playground

by fillano

HTML

<div id='oDiv'>
<button id='oBtn'>
test
</button>
</div>

JavaScript

//capturing phase
document.body.addEventListener('click', e=>{console.log('body click captured.')}, true);
document.getElementById('oDiv').addEventListener('click', e=>{console.log('div click captured.')}, true);
document.getElementById('oBtn').addEventListener('click', e=>{console.log('button click captured.')}, true);

//bubbling phase
document.body.addEventListener('click', e=>{console.log('body click bubbled.')}, false);
document.getElementById('oDiv').addEventListener('click', e=>{console.log('div click bubbled.')}, false);
document.getElementById('oBtn').addEventListener('click', e=>{console.log('button click bubbled.')}, false);