JSFiddle - React, Tailwind, and code Playground

by rafalry

HTML

<div id="a">
    <div id="b">
    </div>
</div>
<div id="console"></div>

CSS

#a{
   width: 400px;
    height: 400px;
    background-color:yellow;
}
#b{
   width: 200px;
    height: 200px;
    background-color:red;
}
span{
    padding: 10px;
}

JavaScript

var doA = function(){$('#console').append('<span>a</span>')} ;
var doB = function(){$('#console').append('<span>b</span>')} ;
var doBody = function(){$('#console').append('<span>body</span>')} ;
var doAUC = function(){$('#console').append('<span>auc</span>')} ;
var doBUC = function(){$('#console').append('<span>buc</span>')} ;
var doBodyUC = function(event){
    $('#console').append('<span>bodyuc</span>');
} ;

document.getElementById('a').addEventListener('click', doA, false);
document.getElementById('a').addEventListener('click', doAUC, true);
document.getElementById('a').addEventListener('click', doB, false);
document.getElementById('a').addEventListener('click', doBUC, true);
document.getElementById('a').addEventListener('click', doBody, false);
document.getElementById('a').addEventListener('click', doBodyUC, true);