JSFiddle - React, Tailwind, and code Playground

by Khalid Alharbi

HTML

<h1>JS Event Bubbling</h1>
<p>Click on the button or inside div2 to see the event bubbling up.</p>
<div class="custom" id="div1" onclick="doClick(this)">Div 1
  <div class="custom" id="div2" onclick="doClick(this)">Div 2
    <input type="button" id="button" value="Click" onclick="doClick(this)" />
  </div>
</div>

CSS

.custom {
  border: 1px solid #000;
  padding: 20px;
  display: table-cell;
  text-align: center;
}

JavaScript

function doClick(element) {
  element.style.border = '1px solid #FF0000'
  alert(element.getAttribute("id") + ' clicked')
}