BUG: Focus event is fired before FocusIN event

by Konstantin Rouda

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

const password = document.querySelector('input[type="password"]');
const text = document.querySelector("input[type=text]");

document.forms[0].addEventListener("focus", function (e) {
  console.log("from FORM focus event");
  console.log("e.relatedTarget: ", e.relatedTarget);
  debugger;
}, true);

document.forms[0].addEventListener("focusin", function (e) {
  console.log("from FORM focusin event");
  console.log("e.relatedTarget: ", e.relatedTarget);
  debugger;
}, true);

password.addEventListener('focus', (event) => {
  console.log("from `password` focus event");
debugger;
  event.target.style.background = 'pink';    
});

text.addEventListener('focusin', (event) => {
  console.log("from `password` focusin event");
	debugger;  
});

text.addEventListener('focus', (event) => {
  console.log("from `text` focus event");
	debugger;
  event.target.style.background = 'pink';    
});

text.addEventListener('focusin', (event) => {
  console.log("from `text` focusin event");
	debugger; 
});

password.addEventListener('blur', (event) => {
  event.target.style.background = '';    
});

text.addEventListener('blur', (event) => {
  event.target.style.background = '';    
});