Best IT Recipes

In web browsers, what's the difference between onblur and onfocusout?

If they match, then why are there two such events?

+53
javascript jquery dom javascript-events
Oct 13 2018-11-11T00:
source share
4 answers

As you know, the onBlur event is fired for an element if this element has focus but loses it.

The onFocusOut event fires in this case, but also fires if any child loses focus.

For example, you have a div with special formatting, because the person is currently editing a field in this area. You could use onFocusOut to turn off this formatting when the focus leaves this div.

Until recently, onFocusOut was only used by IE. If this has changed, it was only recently. Test in FF, Chrome, etc.

+52
Oct 13 '11 at 1:46 april
source share
— -

The onfocusout event is a non-standard event that works only in Internet Explorer, and the onblur event is part of the W3C standards and works in every modern browser.

+10
Oct 13 '11 at 2:00
source share

The jQuery documentation has a good focusout vs. blur demo , which I will reproduce below for clarity. In short, focusout fires if the selector is $('p') in the demo, that's all, including inputs and parent elements. If blur only works if the selector is on the inputs - $('input') .

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>focusout demo</title> <style> .inputs { float: left; margin-right: 1em; } .inputs p { margin-top: 0; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div class="inputs"> <p> <input type="text"><br> <input type="text"> </p> <p> <input type="password"> </p> </div> <div id="focus-count">focusout fire</div> <div id="blur-count">blur fire</div> <script> var focus = 0, blur = 0; $( "p" ) .focusout(function() { focus++; $( "#focus-count" ).text( "focusout fired: " + focus + "x" ); }) .blur(function() { blur++; $( "#blur-count" ).text( "blur fired: " + blur + "x" ); }); </script> </body> </html>
0
Dec 29 '15 at 11:41
source share

In 2017, the difference has not changed:

https://www.quirksmode.org/js/events_order.html

Several web developers deliberately use event capture or bubble. On web pages, as they are made today, one simply does not need to be allowed to handle a bubble event by several event handlers. Users can get confused in a few things that happen after a single click, and usually you want to split up event processing scripts.

0
Nov 09 '17 at 22:53 on
source share


More articles:


All Articles