在网页浏览器中，模糊和聚焦的区别是什么？

小开

最佳答案

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.

小开

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.

小开

The Jquery documentation has a good focusout vs. blur demo which I'll reproduce below for clarity. In short, focusout fires if the selector — $('p') in the demo — is anything including the inputs and parent elements. Whereas, blur only fires 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>

小开

There's essentially no difference in 2017:

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

Few web developers consciously use event capturing or bubbling. In Web pages as they are made today, it is simply not necessary to let a bubbling event be handled by several different event handlers. Users might get confused by several things happening after one mouse click, and usually you want to keep your event handling scripts separated.

小开

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.

小开

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>

小开

There are two differences:

focusin/focusout bubble, while focus/blur don't, and
focusin/focusout are fired just before the focus shift, while focus/blur happen after it

https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event