Руководство jQuery - trigger(event,data)

Опубликовано admin - вт, 05/01/2018 - 23:40

[Функция] trigger(event,data)

Раздел "Events"

Функция инициирует событие для каждого подходящего элемента.

Параметры

trigger(event,data)

1.0

event: запускаемое событие объект или его тип.

data: дополнительные данные, передаваемые в качетсве аргумента (после события объекта) к обработчику события.

Описание

Данная функция выступает причиной создания действия по умолчанию для браузера с таким же именем (если оно существует), для того чтобы быть выполненным. К примеру передача события 'submit' функции trigger(), будет причиной отправки браузеру формы. Это действие по умолчанию может быть предотвращено возвращением false одной из функций связанного события.

Инициировать можно не только те события, которые поддерживаются браузером, вы можете инициировать пользовательское событие связанное с функцией. Обработчик события получит зафиксированное (нормализованное) событие - объект, но оно не будет содержать любые специфичные для браузера атрибуты (например, такие как keyCode, pageX, или pageY). jQuery так же поддерживает пространство имен событий. Это позволяет вам инициировать или освобождать особые группы связанных обработчиков без указания ссылки на них напрямую. Вы можете добавить знак ! к концу событий, чтобы инициировать только обработчики, которые не имеют определенного пространства имён.

Новое в jQuery 1.3: Все инициированные события немедленно всплывают по структуре DOM документа. К примеру, если вы инициируете событие для параграфа этот элемент будет инициирован первым, затем его родительский элемент, и его родительский элемент, и так далее по документу. Событие объект будет иметь .target свойство подобное оригинальному инициированому элементу.

Вы можете предотвратить всплывание, вызвав функцию stopPropagation() или вернув false с помощью функции callback. Событие объект является конструктором, поэтому вы можете создавать собственные события объекты. Полный лист свойств, доступных для события объекта (перехватываемых инициированным обработчиком) ищите в разделе jQuery.Event документации.

Доступны 3 способа определения события:

Вы можете указать имя события (тип) как строку.

Вы можете так же использовать jQuery.Event объект.

Вы можете указать данные в объекте, которые будут переданы обработчику. В заключение, вы можете передать буквальный объект с данными. Это приведет к копированию jQuery.Event объекта. Вы должны определить тип атрибута в данном случае.

Примеры

Пример:

Нажатие по кнопке с номером 2 приведёт к нажатию по кнопке с номером 1.

Пример
Весь код

"jQuery"

    $("button:first").click(function () {
      update($("span:first"));
    });
    $("button:last").click(function () {
      $("button:first").trigger('click');

      update($("span:last"));
    });

    function update(j) {
      var n = parseInt(j.text(), 10);
      j.text(n + 1);
    }

"HTML"

<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>

"CSS"

  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
						"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" 
	rel="stylesheet" type="text/css"/>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script>
	  $(document).ready(function(){
	
    $("button:first").click(function () {
      update($("span:first"));
    });
    $("button:last").click(function () {
      $("button:first").trigger('click');

      update($("span:last"));
    });

    function update(j) {
      var n = parseInt(j.text(), 10);
      j.text(n + 1);
    }

	  });
	</script>

	</head>
	<body class="iframe">

	
<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>


	</body>
	</html>

	
	<style>
	
  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }

	</style>

Пример:

Отправка формы без использования функции submit():

"jQuery"

$("form:first").trigger("submit")

Пример:

То же самое, что и предыдущий пример:

"jQuery"

var event = jQuery.Event("submit");
$("form:first").trigger(event);
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

Пример:

Передать произвольные данные событию:

"jQuery"

$("p").click( function (event, a, b) {
  // при обычном нажатии a и b не определены
  // при инициировании, как показано ниже, переменная a будет ссылаться на "foo" и переменная b на "bar"
} ).trigger("click", ["foo", "bar"]);

Пример:

Передать произвольные данные через событие объект:

"jQuery"

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

Пример:

Дополнительный путь передать данные через событие объект:

"jQuery"

$("body").trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});

Метод появился в jQuery 1.0 (http://api.jquery.com/trigger/)

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство по jQuery!

Плагины jQuery UI

Эффекты