jQuery метод .one()

jQuery события

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

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></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></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 события