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 事件，以解決此限制。

與其他瀏覽器相反，原生 blur 事件在所有版本的 IE 中都是非同步的。為了避免與此差異相關的問題，從 jQuery 3.7.0 版開始，jQuery 會在 IE 中使用 focusout 作為 blur 的原生後盾事件。

範例

若要在所有段落上觸發 blur 事件

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