JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" placeholder="Focus me, then blur">

<div>
  <b>Focus event type:</b> <span id="focus-output"></span>
</div>

<div>
  <b>Focus-In event type:</b> <span id="focus-in-output"></span>
</div>

<div>
  <b>Focus-Out event type:</b> <span id="focus-out-output"></span>
</div>

<div>
  <b>Blur event type:</b> <span id="blur-output"></span>
</div>

JavaScript

const input = document.querySelector('input')

const focusOutput = document.getElementById('focus-output')
const focusInOutput = document.getElementById('focus-in-output')
const focusOutOutput = document.getElementById('focus-out-output')
const blurOutput = document.getElementById('blur-output')

input.addEventListener('focus', (event) => { focusOutput.innerText = event.constructor.name })
input.addEventListener('focusin', (event) => { focusInOutput.innerText = event.constructor.name })
input.addEventListener('focusout', (event) => { focusOutOutput.innerText = event.constructor.name })
input.addEventListener('blur', (event) => { blurOutput.innerText = event.constructor.name })