Обработка событий с помощью библиотеки jQuery

Одна из сложностей, связанных с обработкой событий, состоит в том, что в IE (до версии IE9) реализована модель событий, отличающаяся от модели событий в других броузерах. Чтобы решить эту проблему, в библиотеке jQuery определяется собственная унифицированная модель событий, которая одинаково работает во всех броузерах. В простейших случаях модель jQuery API оказывается проще в использовании, чем стандартная модель или модель IE.

Простые методы событий

Библиотека jQuery определяет простые методы регистрации обработчиков для всех наиболее часто используемых событий, поддерживаемых всеми броузерами. Например, чтобы зарегистрировать обработчик события «click», достаточно просто вызвать метод click():

// Щел­чок на лю­бом эле­мен­те ок­ра­ши­ва­ет его фон в се­рый цвет

$("p").click(function() { $(this).css("background-color", "gray"); });

Вызов метода объекта jQuery регистрации обработчика событий зарегистрирует указанный обработчик во всех выбранных элементах. Обычно это проще, чем регистрировать один и тот же обработчик во всех элементах по отдельности с помощью метода addEventListener() или attachEvent().

Библиотека jQuery определяет следующие простые методы регистрации обработчиков событий:

blur() focusin() mousedown() mouseup() change() focusout() mouseenter() resize() click() keydown() mouseleave() scroll() dblclick() keypress() mousemove() select() error() keyup() mouseout() submit() focus() load() mouseover() unload()

Большая часть этих методов регистрации обработчиков уже знакомы вам. Тем не менее необходимо сделать несколько замечаний.

События «focus» и «blur» не всплывают, в отличие от всплывающих событий «focusin» и «focusout», и библиотека jQuery гарантирует, что эти события будут работать во всех броузерах.

События «mouseover» и «mouseout», наоборот, всплывают, и это часто доставляет неудобства, так как сложно определить – указатель мыши покинул интересующий нас элемент или событие было доставлено от одного из потомков.

События «mouseenter» и «mouseleave» не всплывают, что решает данную проблему. Эти типы событий впервые появились в IE, но библиотека jQuery гарантирует, что они корректно будут работать во всех броузерах.

События «resize» и «unload» возбуждаются только в объекте Window, поэтому, если потребуется зарегистрировать обработчики этих типов событий, методы resi­ze() и unload() следует вызывать относительно $(window).

Метод scroll() часто вызывается относительно $(window), но его также можно вызывать относительно любых элементов, имеющих полосы прокрутки (например, относительно элементов, в которых CSS-атрибут overflow имеет значение «scroll» или «auto»).

В дополнение к этим простым методам регистрации обработчиков событий существует две специальные формы методов, которые могут иногда пригодиться. Метод hover() регистрирует обработчики событий «mouseenter» и «mouseleave». Вызов hover(f,g) по своему действию аналогичен двум последовательным вызовам методов mouseenter(f) и mouseleave(g). Если методу hover() передать единственный аргумент, он будет использоваться как обработчик обоих событий.

Другим специальным методом регистрации обработчиков событий является метод toggle(). Этот метод регистрирует функцию обработчика события «click». Вы можете указать две или более функции обработчиков, и библиотека jQuery будет вызывать их всякий раз, когда будет возникать событие «click». Если, например, вызвать этот метод как toggle(f,g,h), функция f() будет вызываться для обработки первого события «click», g() – второго, h() – третьего и снова f() – для обработки четвертого события «click».

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

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

Для начала познакомимся с некоторыми общими особенностями механизма анимационных эффектов в библиотеке jQuery.

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

jQuery.fx.speeds["medium-fast"] = 300;

jQuery.fx.speeds["medium-slow"] = 500;

Методы воспроизведения эффектов объекта jQuery обычно принимают продолжительность в первом необязательном аргументе. Если опустить этот аргумент, по умолчанию продолжительность будет составлять 400 миллисекунд. Однако некоторые методы, не получив аргумент с продолжительностью, выполняют операцию немедленно, без анимационного эффекта:

$("#message").fadeIn(); // Эф­фект про­яв­ле­ния бу­дет длить­ся 400 мсек

$("#message").fadeOut("fast"); // Эф­фект рас­тво­ре­ния бу­дет длить­ся 200 мсек