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." );
} );

现在，如果第一个字段获得了焦点，点击其他地方或使用 Tab 键离开它将显示提示框

调用了 `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" );