JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<div id="outerDiv">
  <div id="innerDiv"></div>
</div>
<br/>
<span id="results">Results:</span>

CSS

#outerDiv {
  height: 200px;
  width: 200px;
  background-color: red;
}
#innerDiv {
  height: 100px;
  width: 100px;
  background-color: blue;
}
#results {
  background-color: lightpink;
}

JavaScript

var outerDiv = document.getElementById('outerDiv');
var innerDiv = document.getElementById('innerDiv');


innerDiv.addEventListener('click', function(e) {
  document.getElementById('results').innerHTML += '<br>innerDiv event handler running...'
}, false);

outerDiv.addEventListener('click', function(e) {
  document.getElementById('results').innerHTML += '<br>outerDiv event handler running...'
}, true);