.blur()

.blur( handler )返回类型:jQuery

描述:把一个事件处理函数绑定到“blur”JavaScript事件,或在一个元素上触发该事件。

在前两个变体中,此方法是.on( "blur", handler )的简写,在第三个变体中,此方法是.trigger( "blur" )的简写。

当元素失去焦点时,blur事件被发送给该元素。最初,此事件只应用于表单元素,譬如<input>。在最近的浏览器中,此事件的域被扩展到包括所有的元素类型。元素可以因为键盘命令(譬如Tab键)或者鼠标在网页上别处点击而失去焦点。

例如:考虑以下HTML:

1
2
3
4
5
6
7
8
9
10
11
<form>
<input id="target" type="text" value="Field 1">
<input type="text" value="Field 2">
</form>
<div id="other">
Trigger the handler
</div>
The event handler can be bound to the first input field:
$( "#target" ).blur(function() {
alert( "Handler for .blur() called." );
});

现在如果第一个字段带有焦点,点击别的地方或轻解别的地方都会显示警告消息:

Handler for .blur() called.

若要编程地触发事件,请应用.blur()而不带参数。

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

执行此代码之后,在触发处理函数上点击,也将弹出警告消息。

在Internet Explorer 中,blur事件不会冒泡。所以,依赖于事件派遣的脚本,其blur事件将不能跨浏览器一致地起作用。然而,从jQuery 1.4.2以来,jQuery通过在事件派遣方法中把blur映射到focusout事件,来变通地绕过了这个局限性。

补充说明:

  • 因为.blur()方法是.on( "blur", handler ) 简写,所以可以使用.off( "blur" )来脱离事件绑定。

示例:

在所有段落上触发blur事件:

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