16

With the answer of my previous question, Textarea highlight on focus, I discovered an alternative to onfocus and onblur. These are onfocusin and onfocusout.

My question is, is there any differences between the two with how they behave?

This fiddle demonstrates that both appear the same: http://jsfiddle.net/spedwards/pQLAM/

2 Answers 2

15

focus and blur events do not bubble, so event delegation is impossible with those events.

focusin and focusout bubbles to the parent elements, and can be delegated.

Otherwise they are the same, but focusin and focusout is not part of any standard, but are in fact proprietary IE events, later adopted by some other browsers, but they are not supported cross browser.

Example

<div id="test">
    <input type="text" />
</div>

with js

var div = document.getElementById('test');

div.addEventListener('focus', handler, false); // does not work, focus does not bubble

div.addEventListener('focusin', handler, false); // works when input is focused, as the event bubbles

FIDDLE

6

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.

1
  • 1
    As of April 2023, focusin and focusout are supported by Firefox.
    – tyrrr
    Commented Apr 13, 2023 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.