Menu
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/
833
Definition and Usage Tip: The onblur event is the opposite of the onfocus event. Tip: The onblur event is similar to the onfocusout event. The main difference is that the onblur event does not bubble. Therefore, if you want to find out whether an element or its child loses focus, you could use the onfocusout event.
The onfocus attribute fires the moment that the element gets focus. Onfocus is most often used with <input>, <select>, and <a>. Tip: The onfocus attribute is the opposite of the onblur attribute.
Description. The onfocus property of a Window specifies an event handler function that is invoked when the window is given keyboard focus. The initial value of this property is a function that contains the semicolon-separated JavaScript statements specified by the onfocus attribute of the <body> or <frameset> tags.
The onfocus event occurs when an element gets focus. The onfocus event is most often used with <input>, <select>, and <a>. Tip: The onfocus event is the opposite of the onblur event.
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.
126
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
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
