Чтение онлайн

на главную - закладки

Жанры

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

$(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
может также вызываться вообще без аргументов. В этом случае он удаляет все динамические обработчики, привязанные к выбранным элементам.

19.5. Анимационные эффекты

В главе 16 демонстрировалось, как можно управлять стилями CSS в элементах документа. Например, устанавливая CSS-свойство

visibility
, можно заставлять элементы появляться и скрываться. В разделе 16.3.1 было показано, как, управляя стилями CSS, можно воспроизводить анимационные эффекты. Например, вместо того, чтобы просто сделать элемент невидимым, можно постепенно уменьшать значение его свойства
opacity
в течение половины секунды и заставить его исчезать плавно. Подобные визуальные эффекты оставляют у пользователей более приятные впечатления, и библиотека jQuery упрощает их реализацию.

Объект

jQuery
определяет методы воспроизведения основных визуальных эффектов, такие как
fadeIn
и
fadeOut.
Кроме них он определяет также метод
animate,
позволяющий воспроизводить более сложные эффекты. В следующих подразделах описываются и методы воспроизведения простых эффектов, и более сложный универсальный метод
animate.
Однако для начала познакомимся с некоторыми общими особенностями механизма анимационных эффектов в библиотеке jQuery.

Каждый анимационный эффект имеет продолжительность, которая определяет, как долго должен продолжаться эффект. Продолжительность можно указать в виде числа миллисекунд или в виде строки. Строка «fast» означает 200 миллисекунд. Строка «slow» означает 600 миллисекунд. Если указать строку, которая не будет распознана библиотекой jQuery, по умолчанию будет использована продолжительность 400 миллисекунд. Имеется возможность определять новые названия, обозначающие продолжительность, добавляя новые отображения строк в числа в объект

jQuery.fx.speeds
:

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

Кодекс Охотника. Книга XIX

Винокуров Юрий
19. Кодекс Охотника
Фантастика:
фэнтези
5.00
рейтинг книги
Кодекс Охотника. Книга XIX

Бастард Императора. Том 3

Орлов Андрей Юрьевич
3. Бастард Императора
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Бастард Императора. Том 3

Кодекс Охотника. Книга XXXII

Винокуров Юрий
32. Кодекс Охотника
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Кодекс Охотника. Книга XXXII

Эволюционер из трущоб. Том 5

Панарин Антон
5. Эволюционер из трущоб
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Эволюционер из трущоб. Том 5

Газлайтер. Том 6

Володин Григорий
6. История Телепата
Фантастика:
попаданцы
альтернативная история
аниме
5.00
рейтинг книги
Газлайтер. Том 6

Тонкий расчет

Шелдон Сидни
Детективы:
триллеры
8.86
рейтинг книги
Тонкий расчет

Идеальный мир для Лекаря 2

Сапфир Олег
2. Лекарь
Фантастика:
юмористическая фантастика
попаданцы
аниме
5.00
рейтинг книги
Идеальный мир для Лекаря 2

Сборник коротких эротических рассказов

Коллектив авторов
Любовные романы:
эро литература
love action
7.25
рейтинг книги
Сборник коротких эротических рассказов

Властелин Севера

Корнуэлл Бернард
3. Саксонские хроники
Приключения:
исторические приключения
8.67
рейтинг книги
Властелин Севера

Эволюционер из трущоб. Том 4

Панарин Антон
4. Эволюционер из трущоб
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Эволюционер из трущоб. Том 4

Кодекс Охотника. Книга XVII

Винокуров Юрий
17. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга XVII

На границе империй. Том 10. Часть 5

INDIGO
23. Фортуна дама переменчивая
Фантастика:
космическая фантастика
попаданцы
5.00
рейтинг книги
На границе империй. Том 10. Часть 5

Эволюционер из трущоб. Том 6

Панарин Антон
6. Эволюционер из трущоб
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Эволюционер из трущоб. Том 6

Практик

Листратов Валерий
5. Ушедший Род
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Практик