在网络浏览器中,onblur和onfocusout之间的区别是什么？

Question

如果它们是相同的,那么为什么会有这样的事件呢？

Answer 1

如您所知,onBlur事件会触发一个元素,如果该元素具有焦点,但会丢失它.

该onfocusout在这种情况下事件触发,但也触发如果任何子元素失去焦点.

例如,您有一个具有特殊格式的div,因为人类当前正在编辑该区域中的字段.当焦点离开该div时,您可以使用onFocusOut关闭该格式.

直到最近,onFocusOut才被IE使用.如果情况发生了变化,那就是最近的情况.在FF,Chrome等测试

Answer 2

根据焦点事件类型的规范:

此事件类型与模糊类似,但在焦点移动之前调度,并确实冒泡.

而blur事件做泡,后来又被分派.

Answer 3

一个小演示。请注意，focusin/focusout 的父 div 更改了颜色。

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>