JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

CSS

ul {
  list-style: none;
}

li {
  border: #eed solid 1px;
  border-radius: 5px;
  width: 60px;
  text-align: center;
  margin: 5px 0;
  padding: 5px 0;
}

JavaScript

let ul = document.querySelector('ul'),
  li = document.querySelectorAll('li');

//call these one after one

//bubbling=====================================================
ul.addEventListener('click', function() {
  alert('ul clicked');
});

li[0].addEventListener('click', function() {
  alert('li-0 clicked');
});

li[1].addEventListener('click', function() {
  alert('li-1 clicked');
});

//capturing=====================================================
ul.addEventListener('click', function() {
  alert('ul clicked');
}, true);

li[0].addEventListener('click', function() {
  alert('li-0 clicked');
}, true);

li[1].addEventListener('click', function() {
  alert('li-1 clicked');
}, true);