JSFiddle - React, Tailwind, and code Playground

by Сергій Куліков

HTML

<input type="text" value="hello" id="foo">

<button id="b1">trigger</button>
<button id="b2">dispatch</button>

CSS

input:focus{
    color: red
}

JavaScript

var el = document.querySelector("input")

el.addEventListener("focus", function(e){
  console.log(e.type)
})

// $.tirgger
b1.addEventListener("click", function(){
  $(el).trigger("focus")
})

// dispatch
b2.addEventListener("click", function(){
  el.dispatchEvent( new FocusEvent('focus') )
})
// same result with new FocusEvent("focus")