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

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

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 следующие две строки можно считать эквивалентными:

х.live(type,handler);
$(x.context).delegate(x.selector, type, handler);

Для удаления динамических обработчиков событий используются методы die() и undelegate(). Метод die() может вызываться с одним или с двумя аргументами. Если методу передать единственный аргумент, определяющий тип события, он удалит все динамические обработчики событий, соответствующие селектору и типу событий. А если передать тип события и функцию обработчика, он удалит только указанный обработчик. Например:

$('a').die('mouseover'); // Удалит все динамические обработчики
                         // события mouseover из элементов <а>
$('a' ).die( mouseover', linkHandler); // Удалит только указанный динамический обработчик

Метод undelegate() действует аналогично методу die(), но более явно отделяет контекст (элементы, в которых был зарегистрирован внутренний обработчик) и строку селектора. Вызовы метода die() выше можно было заменить вызовами метода undelegate(), как показано ниже:

$(document).undelegate('а'); // Удалит все динамические обработчики из элементов <а>
$(document).undelegate('а', ’mouseover); // Удалит динамические обработчики
                                         // события mouseover
$(document).undelegate('а', ’mouseover’, linkHandler); // Указанный обработчик

Наконец, метод undelegate() может также вызываться вообще без аргументов. В этом случае он удаляет все динамические обработчики, привязанные к выбранным элементам.

Оглавление книги