JavaScript. Подробное руководство, 6-е издание

После вызова обработчиков событий метод trigger (и вспомогательные методы, вызывающие его) выполняет действия, предусмотренные по умолчанию для сгенерированного типа события (предполагается, что ни один обработчик не вернул значение false или не вызвал метод preventDefault объекта события). Например, если возбудить событие «submit» в элементе <form>, метод trigger вызовет метод submit этой формы, а если возбудить в элементе событие «focus», метод trigger вызовет метод focus этого элемента.

Если необходимо вызвать обработчики событий без выполнения действий по умолчанию, вместо метода trigger следует использовать метод triggerHandler. Этот метод действует точно так же, как и метод trigger, за исключением того, что он сначала вызывает методы preventDefault и cancelBubble объекта Event. Это означает, что искусственное событие не будет всплывать, и для него не будут выполняться действия, предусмотренные по умолчанию.

19.4.7. Реализация собственных событий

Система управления событиями в библиотеке jQuery создана на основе стандартных событий, таких как щелчки мышью или нажатия клавиш, генерируемых веб-броузерами. Но она не ограничивается только этими событиями и позволяет использовать любую строку в качестве имени типа события. Метод bind позволяет регистрировать обработчики таких «нестандартных событий», а метод trigger– вызывать эти обработчики.

Такая разновидность косвенного вызова обработчиков нестандартных событий может оказаться весьма полезной при разработке модулей и реализации модели издатель/подписчик или шаблона Observer (наблюдатель). Зачастую при использовании собственных событий может оказаться полезной возможность возбуждать их глобально, с помощью функции jQuery.event.trigger вместо метода trigger:

  // Когда пользователь щелкнет на кнопке "logoff", отправить собственное событие
  // всем подписанным на него наблюдателям, которые должны сохранить информацию
  // о своем состоянии, и затем перейти на страницу выхода.
  $("#logoff").click(function {
   $.event.trigger("logoff"); // Отправить широковещательное событие
   window.location = "logoff.php"; // Перейти на другую страницу
  });

В разделе 19.6.4 вы узнаете, что методы поддержки архитектуры Ajax в библиотеке jQuery аналогичным образом рассылают широковещательные события заинтересованным приемникам.

19.4.8. Динамические события

Метод bind связывает обработчики событий с конкретными элементами документа, подобно методам addEventListener и attachEvent (глава 17). Но веб-приложения, использующие библиотеку jQuery, часто создают новые элементы динамически. Если мы воспользуемся методом bind для привязки обработчика событий ко всем элементам <а>, имеющимся в документе, и затем создадим новые элементы <а>, эти новые элементы не будут иметь обработчиков событий, которые были в старых элементах, и будут вести себя иначе.

В библиотеке jQuery эта проблема решается с помощью «динамических событий». Чтобы задействовать динамические события, вместо методов bind и unbind следует использовать методы delegate и undelegate.

Обычно метод delegate вызывается относительно $(document), и ему передаются строка селектора, строка с типом события и функция обработчика, а он регистрирует внутренний обработчик в объекте документа или окна (или в любом другом элементе, находящемся в объекте jQuery). Когда событие указанного типа всплывет до этого внутреннего обработчика, он выяснит, соответствует ли целевой элемент события (элемент, в котором оно возникло) строке селектора, и вызовет указанную функцию обработчика. То есть, чтобы обеспечить обработку события «mouseover» и в старых, и во вновь созданных элементах <а>, можно зарегистрировать обработчик, как показано ниже:

  $(document).delegate("a", "mouseover", linkHandler);

Или сначала применить метод bind к статической части документа, а затем с помощью метода delegate обработать динамически изменяемую часть:

  // Статические обработчики событий для статических ссылок
  $("а").bind("mouseover", linkHandler);

  // Динамические обработчики событий для фрагментов документа,
  // которые изменяются динамически
  S(".dynamic").delegate("a", "mouseover", linkHandler);

Подобно тому, как метод bind имеет версию с тремя аргументами, позволяющую указать значение свойства data объекта события, метод delegate имеет версию с четырьмя аргументами, позволяющую то же самое. При использовании этой версии дополнительные данные следует передавать в третьем аргументе, а функцию обработчика - в четвертом.

Важно понимать, что динамические события основаны на механизме всплытия. К тому моменту, когда оно всплывет до объекта документа, оно может пройти через множество статических обработчиков. А если какой-либо из этих обработчиков вызовет метод cancelBubble объекта Event, динамический обработчик так и не будет вызван.

Объект jQuery имеет метод live, который также можно использовать для регистрации динамических обработчиков событий. Метод live устроен немного сложнее, чем метод delegate, но он, как и метод bind, имеет версии с двумя и тремя аргументами, которые чаще всего используются на практике. Два вызова метода delegate, показанные выше, можно было бы заменить следующими вызовами метода live:

  $("а").live("mouseover", linkHandler);
  $("а", $(".dynamic")).live("mouseover”, linkHandler);

Когда вызывается метод live, элементы, находящиеся в объекте jQuery, в действительности никак не используются. Что имеет значение, так это строка селектора и объект контекста (первый и второй аргументы функции $), использовавшиеся при создании объекта jQuery. Эти значения доступны в виде свойств selector и context объектов jQuery (раздел 19.1.2). Обычно функция $ вызывается с единственным аргументом, а роль контекста в этом случае играет текущий документ. То есть при использовании объекта х типа jQuery следующие две строки можно считать эквивалентными: