要素のblurイベントに実行させたい関数を指定します。

• .blur( handler(eventObject) ) 1.0追加
• .blur( [eventData], handler(eventObject) ) 1.4.3追加
• .blur() 1.0追加
• サンプル

このメソッドは、1つ目と2つ目は.bind('blur', handler)への、3つ目は.trigger('blur')への ショートカットです。

blurは指定要素がフォーカスを失った際に発生するイベントです。 かつては<input>のようなフォーム要素専用のイベントでしたが、最近のブラウザでは Tabキーや他の要素へのマウスクリック等でフォーカスを失ったとみなし、blurイベントが 発生するようになっています。

.blur( handler(eventObject) ) 1.0追加

戻り値:jQuery

要素のblurイベントに実行させたい関数を指定します。

引数	説明
handler(eventObject)	イベントが発生した際に、実行したい処理を関数として指定します。

$('#target').blur(function() {
  alert('blurイベントが発生しました。');
});

.blur( [eventData], handler(eventObject) ) 1.4.3追加

戻り値:jQuery

要素のblurイベントに実行させたい関数を指定します。

引数	説明
[eventData]	マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
handler(eventObject)	イベントが発生した際に、実行したい処理を関数として指定します。

.blur() 1.0追加

戻り値:jQuery

blurイベントを発生させます。

//全てのP要素でblurイベントを発生させます。
$("p").blur();

サンプル

最初のテキストフィールドにフォーカスがあった場合、Tabキーや他の要素へのマウスクリックで、 アラートが表示されます。
また、IDがotherのDIV要素のクリックでも、同じようにアラートが表示されます。

<form>
  <input id="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div id="other">
  blurイベントを発生！
</div>

$('#target').blur(function() {
  alert('blurイベントが発生しました。');
});

//故意にblurイベントを発生させます。
$('#other').click(function() {
  $('#target').blur();
});

 Back to top