onfocus(): triggers when an input field gets focus. Mostly used with input, select, and a tag.
onfocusin(): The onfocus event is similar to the onfocusin event. The main difference is that the onfocus event does not bubble. Therefore, if you want to find out whether an element or its child gets the focus(), you could use the onfocusin event. However, you can achieve this by using the optional useCapture parameter of the addEventListener() method for the onfocus event. Also, onfocusin() is not supported by firefox.
Below code is an example where selected the form but event is delegeting to the input elements which are children of form. Same won't happen if replaced with "focus()".
<!DOCTYPE html>
<html>
<body>
<p>When you enter the input field (child of FORM), a function is triggered which sets the background color to yellow. When you leave the input field, a function is triggered which removes the background color.</p>
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
</body>
</html>
onblur(): when a user leaves an input field or loses focus.
onfocusout: The onblur event is similar to the onfocusout event. The main difference is that the onblur event does not bubble i.e does not delegate to the child element. Therefore, if you want to find out whether an element or its child loses focus, you could use the onfocusout event. However, you can achieve this by using the optional useCapture parameter of the addEventListener() method for the onblur event.Also, onfocusout() is not supported by firefox.