ywork2020.com

Title

要素にブラーイベントを登録する

目次 (INDEX)

blurとは

ここで説明する blur とは次の語句からなるjQueryのメソッドです。
blur
読み: ブラー
意味: 滲む(にじむ)、輪郭や境界などが不鮮明になる様

目次に戻る

blurメソッドの概要

このメソッドは、セレクタに該当する既存要素にブラーイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているブラーイベントを呼び出します。

ブラーイベントは、入力要素が入力可能な状態から入力不可の状態になると発生します。 これは focusout() と同じように見えますが、 blur() の場合、先祖要素や親要素にイベントのバブリングを起こしません。

イベントのバブリングとは子要素にバインドしているイベントの発生が親要素に伝播して、親要素にバインドしている同種イベントも同時(子要素から順次)に発生する現象のことを言います。 バブリングは「良い」、「悪い」で判断するのではなく、そのような機能であり、状況によってメソッドを選択することが必要です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

Selector.blur(Handler(EventObject));
Selector.blur([EventData], Handler(EventObject));
Selector.blur();
  • 01: ブラーイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているブラーイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

ここでは、入力要素にマウスポインターが乗った時点で focus() を使ってシンプルに入力要素にフォーカスを当てます。

また、入力要素からマウスポインター外れたときにblur() を使って入力要素からフォーカス消失させてみます。

サンプルコード: CSS 
<style>
	input{
		margin: 2em;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<input type="text">
	<input type="text">
	<script>...</script>
</body>
  • 06, 07: input (テキスト入力要素です。)
サンプルコード: script 
<script>
	$("input").mouseenter(function(){
		$(this).focus();
	});
	$("input").mouseleave(function(){
		$(this).blur();
	});
</script>
  • 02-04: mouseenter() (マウスポインターが要素の上に乗ったにイベントが発生します。)
  • 03: focus() (このメソッドは引数が空の場合には、要素がフォーカスを取得します。)
  • 05-07: mouseleave() (マウスポインターが要素の上から外れたときにイベントが発生します。)
  • 06: blur() (このメソッドは引数が空の場合には、要素はフォーカスを失います。)
実行結果:

目次に戻る