blur 事件

类别: 事件 > 表单事件 | 表单
绑定一个事件处理程序到 "blur" 事件，或者触发该事件到一个元素上。

内容

.on( "blur" [, eventData ], handler )返回值: jQuery

描述: 绑定一个事件处理程序到 "blur" 事件。

此页面描述了 blur 事件。对于已弃用的 .blur() 方法，请参阅 .blur()。

当元素失去焦点时，会向该元素发送 blur 事件。最初，此事件仅适用于表单元素，例如 <input>。在最近的浏览器中，该事件的范围已扩展到包括所有元素类型。元素可以通过键盘命令（例如 Tab 键）或通过页面上的其他鼠标点击失去焦点。

例如，考虑以下 HTML

1
2
3
4
5
6
7
 
<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>
<div id="other">
  Trigger the handler
</div>

事件处理程序可以绑定到第一个输入字段

1
2
3
 
$( "#target" ).on( "blur", function() {
  alert( "Handler for `blur` called." );
} );

现在，如果第一个字段具有焦点，则单击其他位置或从该字段中跳出将显示警报

调用了 `blur` 处理程序。

要以编程方式触发事件，请调用 .trigger( "blur" )

1
2
3
 
$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "blur" );
} );

执行完此代码后，点击 触发处理程序 也会弹出消息。

blur 事件不会冒泡。从 1.4.2 版本开始，jQuery 通过在其事件委托方法中将 blur 映射到 focusout 事件来解决此限制。

在所有版本的 IE 中，原生 blur 事件都是异步的，这与其他浏览器不同。为了避免与这种差异相关的問題，从 jQuery 3.7.0 开始，jQuery 在 IE 中使用 focusout 作为 blur 的原生支持事件。

示例

要触发所有段落的 blur 事件

1
 
$( "p" ).trigger( "blur" );