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

Флэнаган Дэвид

// Обработчик onclick элемента buttonl генерирует то же событие для button2

$('flbuttonl').click(function(e) { $('flbutton2').trigger(e); });

// Добавит дополнительные свойства в объект события при возбуждении события

$('flbuttonl').trigger({type: 'click', synthetic:true});

// Этот обработчик проверяет дополнительные свойства, чтобы отличить

// настоящее

событие от искусственного

$('flbuttonl').click(function(e) { if (е.synthetic) (...) }):

Передать дополнительные данные обработчикам при возбуждении событий вручную можно также с помощью второго аргумента метода

trigger

. Значение, переданное методу

trigger

во втором аргументе, будет передаваться во втором аргументе всем запущенным обработчикам событий. Если во втором аргументе передать массив, каждый его элемент будет передан обработчикам в виде отдельного аргумента:

$('flbuttonl').trigger("click", true); // Передать единственный дополнительный аргумент

$('flbuttonl').trigger("click", [х,у,z]); // Передать три дополнительных аргумента

Иногда может потребоваться запустить все обработчики события данного типа, независимо от того, к какому элементу документа они привязаны. Для этого можно выбрать все элементы вызовом

$('*')

и вызвать метод

trigger

относительно результата, но это решение весьма неэффективно. Вместо того чтобы возбуждать событие в глобальном масштабе, можно вызвать вспомогательную функцию

jQuery.event.trigger.

Эта функция принимает те же аргументы, что и метод

trigger,

и эффективно запускает обработчики событий указанного типа, имеющиеся во всем документе. Обратите внимание, что «глобальные события», возбуждаемые таким способом, не всплывают, и при этом запускаются только обработчики событий, зарегистрированные с использованием методов объекта

jQuery

(обработчики, зарегистрированные с помощью свойств модели DOM, не запускаются).

После вызова обработчиков событий метод

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» и в старых, и во вновь созданных элементах

<а>,

можно зарегистрировать обработчик, как показано ниже: