Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 [Робин Никсон] (pdf) читать постранично, страница - 89

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

528

Глава 21. Введение в jQuery

получает фокус. Затем ко всем элементам input добавляются два обработчика.
Обработчик события focus устанавливает для этих элементов желтый фон, когда
они получают фокус, а обработчик события blur устанавливает для них светлосерый фон, когда фокус с них убирается (у них теряется).
Пример 21.5. Использование событий focus и blur


События: blur



Щелкните в пределах и за пределами этих полей


$('#first').focus()
$('input').focus(function() { $(this).css('background', '#ff0') } )
$('input') .blur(function() { $(this).css('background', '#aaa') } )



Между закрывающей скобкой метода и оператором-точкой, используемым для прикрепления к нему еще одного метода, разрешается включать пробельные символы (и после точки
тоже), что я и сделал в предыдущем примере, чтобы выровнять по правому краю имена
событий focus и blur, находящиеся друг под другом, чтобы все остальные части инструкций
также выстроились в столбец.

На рис. 21.4 показано, как с помощью этого кода любым полям ввода, у которых
когда-либо был фокус, придается светло-серый цвет фона. Если у одного из полей
в данный момент имеется фокус, цвет его фона становится желтым, а непосещенные
поля по-прежнему имеют белый цвет фона.

Рис. 21.4. Прикрепление к событиям blur и focus

Функции и свойства событий

529

Ключевое слово this
Этот пример также служит иллюстрацией применения ключевого слова this.
При вызове события объекту this передается элемент, в отношении которого это
событие было инициировано, и теперь этот объект может быть передан методу $
для обработки. Или же, поскольку он является стандартным объектом JavaScript
(а не объектом jQuery), он может быть использован в качестве такого объекта.
Поэтому, если хотите, можете заменить следующий код:
$(this).css('background', '#ff0')

вот этим кодом:
this.style.background = '#ff0'

События click и dblclick
Событие click ранее уже рассматривалось, но есть также событие, предназначенное
для обработки двойных щелчков. Чтобы воспользоваться любым из них, нужно
прикрепить метод события к селектору jQuery, а в качестве его аргумента поместить jQuery-метод, который будет запущен, когда это событие произойдет:
$('.myclass')
.click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide()
})

Здесь я решил использовать безымянные функции, но при желании вместо них
можно воспользоваться функциями с именами (но не забудьте, что предоставить
нужно только имя функции без круглых скобок, в противном случае она будет вызвана несвоевременно). Объекту this будет передано то, что и ожидалось, и он
станет доступен именованной функции:
$('.myclass').click(doslide)
function doslide()
{
$(this).slideUp()
}

Подробное описание методов slideUp и hide дается в разделе «Специальные
эффекты» данной главы. А сейчас просто попробуйте запустить код примера 21.6
и сделайте одинарный либо двойной щелчок на кнопках, чтобы посмотреть, как
одни из них исчезают с применением анимации (при использовании slideUp),
а другие просто исчезают (при использовании hide). Результат работы кода показан
на рис. 21.5.
Пример 21.6. Прикрепления к событиям click и dblclick



События: click & dblclick


530

Глава 21. Введение в jQuery



Сделайте на кнопках одинарный и двойной щелчок
Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4
Кнопка 5

$('.myclass').click( function() { $(this).slideUp() })
$('.myclass').dblclick( function() { $(this).hide() })




Рис. 21.5. На кнопке 3 был сделан одинарный щелчок, и она ускользнула вверх

Событие keypress
Периодически возникает потребность в более тщательном контроле работы пользователя на клавиатуре, в особенности при обработке сложных форм или написании игр. В таких случаях можно воспользоваться методом keypress, который может
быть прикреплен к любому элементу, воспринимающему клавиатурный ввод, например к полю ввода или даже самому документу.
В примере 21.7 метод прикреплен к документу, чтобы перехватывать все нажатия клавиш, и результат его запуска показан на рис. 21.6.
Пример 21.7. Перехват нажатия клавиш



События: keypress

531

Функции и свойства событий




Нажмите какие-нибудь клавиши


$(document).keypress(function(event)
{
key = String.fromCharCode(event.which)
if (key >= 'a' && key = 'A' && key = '0' && key