JSFiddle - React, Tailwind, and code Playground

by gravi2

HTML

<table id="table" border="1">
    <tbody>
        <tr>
            <td id="column1">
                Event bubbling 
            </td>
        </tr>
        <tr>
            <td id="column2">
                Event capture 
            </td>
        </tr>
    </tbody>
</table>
<br>
Output
<br>
<div id="outputwrapper"><div id="output"></div></div>

CSS

#outputwrapper {
    border:1px solid black;
    height:300px;
    overflow:scroll;
}

JavaScript

function log(msg) {
    var outputDiv = document.getElementById('output');
    outputDiv.insertAdjacentHTML('afterend',msg + '<br>');
}

document.getElementById('table').addEventListener('click',function() {
    log('table listener called');
});

document.getElementById('column1').addEventListener('click',function(e) {
    log('column1 listener called');
    e.stopPropagation();
});

document.getElementById('column2').addEventListener('click',function(e) {
    log('column2 listener called');
    //e.stopPropagation();
});


document.addEventListener('click', function() { 
    log('Bubbling document listener called');
},false);


document.addEventListener('click', function() { 
    log('Capturing document listener called');
},true);