JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div tabindex="0" class="a"></div>

CSS

.a {
  width: 100px;
  height: 100px;
  background-color: blue;
}

JavaScript

document.querySelector('.a').addEventListener("focus", (e) => console.log(e.type, 'square')); 
document.querySelector('.a').addEventListener("blur", (e) => console.log(e.type, 'square'));
window.addEventListener("focus", (e) => console.log(e.type));
window.addEventListener("blur", (e) => console.log(e.type)); 

 // focus bubble version is focusin
 // blur bubble version is focusout