In web browsers, what's the difference between onblur and onfocusout?
Solution 1
As you know, the onBlur event fires for an element if that element had the focus, but loses it.
The onFocusOut event fires in this case, but also triggers if any child element loses focus.
For example, you have a div with special formatting because the human is currently editing a field in that area. You'd could use onFocusOut to turn that formatting off when focus leaves that div.
Up until very recently, onFocusOut was only used by IE. If that has changed, it has been very recent. Test in FF, Chrome, etc.
Solution 2
Acccording to the spec for the focusout event type:
This event type is similar to blur, but is dispatched before focus is shifted, and does bubble.
Whereas blur
events do bubble, and are dispatched later.
Solution 3
The focusout event fires when an element is about to lose focus.
The main difference between this event and blur is that focusout bubbles while blur does not. Most times, they can be used interchangeably.
Solution 4
A litte demo. Notice that the parent div of focusin/focusout changes its color.
div {
background-color: #eee;
padding: 5px;
}
<div onfocusin="this.style['background-color']='#efe'"
onfocusout="this.style['background-color']='#eef'">
<input onfocusin="this.value='focusin'"
onfocusout="this.value='focusout'"
placeholder="focusin/focusout"/> bubbling (parent div receives event, too)
</div>
<div onfocus="this.style['background-color']='#efe'"
onblur="this.style['background-color']='#eef'">
<input onfocus="this.value='focus'"
onblur="this.value='blur'"
placeholder="focus/blur"/> not bubbling
</div>
Related videos on Youtube
lovespring
I'm an advanced typist. I can type in many languages, including Chinese, English, c++, php, javascript and SQL.
Updated on July 05, 2022Comments
-
lovespring almost 2 years
If they're the same, then why there are two of this kind of event?
-
Mikhail over 8 yearsfull explanation of event bubbling and capturing javascript.info/tutorial/bubbling-and-capturing
-
-
Snymax over 9 yearsjan 2014 im using onfocusout in chrome
-
Fez Vrasta about 8 yearsonBlur is fired even if the page loses focus
-
user1063287 over 5 yearsaug 2018, chrome, the
e.type
for jQuery on click handler forblur
isfocusout
and notblur
, i don't understand why.