Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

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

Шрифт:

Такая разновидность косвенного вызова обработчиков нестандартных событий может оказаться весьма полезной при разработке модулей и реализации модели издатель/подписчик или шаблона 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
следующие две строки можно считать эквивалентными:

  • Читать дальше
  • 1
  • ...
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: