.blur()【《フォーカス喪失 (バブリングなし)》イベントハンドラ設定・実行】

メモ

構文

説明構文戻り値
《フォーカス喪失 (バブリングなし)》
イベントハンドラ設定 		.blur( handler ) 1.0

handler：イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5：基本DOM要素 参照)

.on( "blur", handler )の省略形 		jQuery
.blur( [eventData ], handler ) 1.4.3

Anything eventData：イベントデータ
handler：イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(イベントデータは、eventObject.data で参照)
(this)該当要素 (HTML5：基本DOM要素 参照)

.on( "blur", data, handler )の省略形 		jQuery
《フォーカス喪失 (バブリングなし)》
イベントハンドラ実行 		.blur() 1.0

.trigger( "blur" )の省略形 		jQuery

関連

例

<style>
.classFocus, .classFocusIn { background-color:pink; }
fieldset.classFocus, fieldset.classFocusIn { background-color:lightcyan; }
label.ex1, label.ex2 { border:1px black solid; padding:1px 10px; }
.output { width:200px; height:100px; }
</style>

<fieldset id="fieldset1" class="ex1">
<legend>.focus() / .blur() 【イベントのバブルアップなし】</legend>
<p>
  <input id="input1" class="ex1" value="input" tabindex="1">
  <button id="button11">.focus()</button>
  <button id="button12">.triggerHandler( "focus" )</button>
</p>
<p>
  <select id="select1" class="ex1" size="3" tabindex="2">
  <option>option1
  <option>option2
  <option>option3
  </select>
</p>
<p><textarea id="textarea1" class="ex1" tabindex="3">textarea</textarea></p>
<p><a id="a1" class="ex1" href="#" tabindex="4">anchor</a></p>
<p>
  <label id="label11" class="ex1">label tabindex 未指定</label>
  <label id="label12" class="ex1" tabindex="5">label tabindex 指定</label>
</p>
<textarea id="output1" class="output">【出力】</textarea>
</fieldset>
<br>

<fieldset id="fieldset2" class="ex2">
<legend>.focusin() / .focusout() 【イベントのバブルアップあり】</legend>
<p>
  <input id="input2" class="ex2" value="input" tabindex="11">
  <button id="button2">.focusin()</button>
</p>
<p>
  <select id="select2" class="ex2" size="3" tabindex="12">
  <option>option1
  <option>option2
  <option>option3
  </select>
</p>
<p><textarea id="textarea2" class="ex2" tabindex="13">textarea</textarea></p>
<p><a id="a2" class="ex2" href="#" tabindex="14">anchor</a></p>
<p>
  <label id="label21" class="ex2">label tabindex 未指定</label>
  <label id="label22" class="ex2" tabindex="15">label tabindex 指定</label>
</p>
<textarea id="output2" class="output">【出力】</textarea>
</fieldset>

<script>
function output(outputId, msg) {
  var $output = $(outputId);
  $output.val($output.val() + "\n" + msg);
}
// .focus() / .blur()
$(".ex1").focus("ex1", function(eventObject) {
  $(this).addClass("classFocus");
  var msg = eventObject.type + " [" + this.id + "] (" + eventObject.data + ")";
  output("#output1", msg);
});
$(".ex1").blur("ex1", function(eventObject) {
  $(this).removeClass("classFocus");
  var msg = eventObject.type + " [" + this.id + "] (" + eventObject.data + ")";
  output("#output1", msg);
});
$("#button11").click(function() {
  $("#input1").focus();
});
$("#button12").click(function() {
  $("#input1").triggerHandler("focus");
});
// .focusin() / .focusout()
$(".ex2").focusin("ex2", function(eventObject) {
  $(this).addClass("classFocusIn");
  var msg = eventObject.type + " [" + this.id + "] (" + eventObject.data + ")";
  output("#output2", msg);
});
$(".ex2").focusout("ex2", function(eventObject) {
  $(this).removeClass("classFocusIn");
  var msg = eventObject.type + " [" + this.id + "] (" + eventObject.data + ")";
  output("#output2", msg);
});
$("#button2").click(function() {
  $("#input2").focusin();
});
</script>

.focus() / .blur() 【イベントのバブルアップなし】

anchor


.focusin() / .focusout() 【イベントのバブルアップあり】

anchor