JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="-1" class="red"></div>
<div tabindex="-1" class="blue"></div>
<div  id="text"></div>

CSS

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

JavaScript

var red = document.getElementsByClassName("red")[0];
var blue = document.getElementsByClassName("blue")[0];
var text = document.getElementById("text");

red.addEventListener("mousedown", function(e){
	text.innerHTML = "red clicked"
});

blue.addEventListener("mousedown", function(e){
	text.innerHTML = "programatically setting focus on red"
  var focusin = new Event("focusin");
  red.dispatchEvent(focusin);

});
red.addEventListener("focusout", function(e){
	text.innerHTML = "red focusout"

});

red.addEventListener("focusin", function(e){
	text.innerHTML = "programatically set focusin detected"

});