jQuery метод .one()

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

jQuery метод .one() приcоединяет для выбранных элементов функцию обработчика, которая будет выполнена не более одного раза к каждому элементу по каждому типу событий.

Обращаю Ваше внимание, что метод .one() идентичен методу .on(), за исключением того, что обработчик для конкретного элемента и типа события отвязывается после его первого вызова.

jQuery синтаксис:

Синтаксис 1.1:
$( selector ).one( events, handler ) 
$( selector ).one( events, data, handler ( Event eventObject ) ) 

events - String 
data - PlainObject // необязательный параметр
handler - Function( Event eventObject )

Синтаксис 1.7:
$( selector ).one( events, selector, data, handler( Event eventObject ) ) 

events - String
selector - String // необязательный параметр
data - Anything // необязательный параметр
handler - Function( Event eventObject ) 

$( selector ).one( events, selector, data ) 

events - PlainObject
selector - String // необязательный параметр
data - Anything // необязательный параметр

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

1.1 (синтаксис расширен в версии 1.7)

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

Параметр	Описание
events	Если в качестве параметра используется строковое значение, то оно соответствует одному, или нескольким разделенных пробелами типов событий (опционально допускается указывать пространство имен). Например: "click" или "click dblclick.myNamespace" Если в качестве параметра используется объект, то в нем строковые ключи представляют один или несколько типов событий, разделенных пробелами, а значения представляют из себя функцию, которая вызывается и обрабатывает событие. В этом случае так же допускается дополнительно указывать пространства имен. Например: {"event": handler, "anotherEvent.myNamespace": anotherHandler}
selector	Строка селектора для фильтрации потомков выбранных элементов, запускающих событие. Обратите внимание, что если параметр отсутствует, или имеет значение null, то обработчик всегда вызывается при достижении выбранного элемента (не зависимо событие вызвано на элементе, или вложенном элементе).
data	Какие-либо данные, или объект, содержащий данные, которые будут переданы в обработчик событий при его срабатывании (свойство объекта Event `event.data`).
handler	Функция, которая будет выполнена один раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event и при необходимости дополнительные параметры для решения конкретной задачи. Значение false также может использоваться в качестве сокращенной записи функции, которая имеет тело return false (при вызове возвращает значение false).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .one()</title>
		<style>div {
display: inline-block; /* блочно-строчные элементы */
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
background: green; /* цвет заднего фона зеленый */	
margin: 10px; /* внешние отступы элемента */
transition: .5s; /* эффект перехода занимает пол секунды */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "div" ).one( "click", function(){ // приcоединяем для выбранных элементов функцию обработчика события "click"
	    $( this ).css( "width", "+=50" ) // устанавливаем элементу на котором было вызвано событие новую ширину
	  })
	});
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .one() мы приcоединяем для выбранных элементов <div> функцию обработчика события, которая будет выполнена не более одного раза к каждому элементу по типу события "click" (клик левой кнопкой мыши). При срабатывании события функция с помощью метода .css() изменяет текущую ширину элемента, прибавляя к текущей ширине элемента 50 пикселей.

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

Пример использования jQuery метода .one(). — Пример использования jQuery метода .one()

В следующем примере мы рассмотрим как присоединить для выбранных элементов функции обработчика для различных событий:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .one() (несколько событий)</title>
		<style>div {
display: inline-block; /* блочно-строчные элементы */
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
background: blue; /* цвет заднего фона синий */	
margin: 10px; /* внешние отступы элемента */
transition: .5s; /* эффект перехода занимает пол секунды */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "div" ).one({
	    "click": function(){ // приcоединяем для выбранных элементов функцию обработчика события "click"
	      $( this ).css( "width", "+=50" ) // устанавливаем элементу на котором было вызвано событие новую ширину
	    },
	    "dblclick": function(){ // приcоединяем для выбранных элементов функцию обработчика события "dblclick"
	      $( this ).css( "height", "+=50" ) // устанавливаем элементу на котором было вызвано событие новую высоту
	    }
	  })
	});
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .one() мы приcоединяем для выбранных элементов <div> функции обработчики события, которые будут выполнены не более одного раза к каждому элементу по типу события "click" (клик левой кнопкой мыши) и "dblclick" (двойной клик левой кнопкой мыши).

При срабатывании события "click" функция с помощью метода .css() изменяет текущую ширину элемента, прибавляя к текущей ширине элемента 50 пикселей. При срабатывании события "dblclick" функция с помощью метода .css() изменяет текущую высоту элемента, прибавляя к текущей ширине элемента 50 пикселей.

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

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

jQuery события