jQuery метод .blur()

Определение и применение

jQuery метод .blur() привязывает JavaScript обработчик событий "blur" (потеря фокуса элементом), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:
$( selector ).blur() // метод используется без параметров

$( selector ).blur( handler ) 

handler - Function( Event eventObject )

Синтаксис 1.4.3:
$( selector ).blur( eventData, handler ) 

eventData - Anything
handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .blur(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

$( selector ).on( "blur", handler ) 

$( selector ).trigger( "blur" )

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4.3)

Значения параметров

Параметр	Описание
eventData	Объект, содержащий данные, которые будут переданы в обработчик событий.
handler	Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .blur() (без параметров и с функцией)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( "div" ).blur(); // вызываем событие blur на элементе <div>
	  });
	  $( "input" ).focus(function(){ // задаем функцию при получении фокуса элементом <input>
	    $( "div" ).attr( "placeholder", "focus" ); // добавляем элементу <input> атрибут placeholder со значением focus
	  });
	  $( "input" ).blur(function(){ // задаем функцию при потери фокуса элементом <input>
	    $( "div" ).attr( "placeholder", "blur" ); // добавляем элементу <input> атрибут placeholder со значением blur
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<input></input>
	</body>
</html>

В этом примере с использованием jQuery метода .blur() мы при нажатии на элемент <button> (кнопка) вызываем событие "blur" на элементе <input>. Самому элементу <input> задаем, что при срабатывании события "blur" на элементе выполнить функцию, которая с использованием метода .attr() добавляет атрибут placeholder html5 со значением blur.

Кроме того, мы с использованием jQuery метода .focus() устанавливаем, что при получении фокуса элементом <input> вызвать функцию, которая с использованием метода .attr() добавляет атрибут placeholder html5 со значением focus.

Результат нашего примера:

Пример использования jQuery метода .blur() (без параметров и с функцией). — Пример использования jQuery метода .blur() (без параметров и с функцией)

Рассмотрим следующий пример, в котором мы используем jQuery метод .blur() с двумя параметрами:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .blur() (с двумя параметрами)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"><script>
	$( document ).ready(function(){
	  var eventData = { myData:'information here' }; // создаем переменную, которая будет передана в объект Event
	  $( "input" ).blur( eventData, function( event ){ // задаем функцию при потере фокуса и передаем данные в объект события
	    $( "span" ).text( "eventData: " + event.data.myData ); // выводим значение свойства data Объекта Event, содержащий значение нашей переменной
	  });
	});
		</script>
	</head>
	<body>
		<input></input>
		<span></span>
	</body>
</html>

В этом примере с использованием jQuery метода .blur() мы при при потере фокуса элементом <input> задаем функцию, которая передает данные в объект события Event (значение созданной переменной) и методом .text() выводим в элементе <span> эти данные с использованием свойства data объекта Event.

Результат нашего примера:

Пример использования jQuery метода .blur() (с двумя параметрами). — Пример использования jQuery метода .blur() (без параметров и с функцией)

jQuery события