Лекция №4. Управление событиями

Использование событий

Использование событий библиотеки jQuery позволяет сделать код совместимый с разными браузерами.

jQuery облегчает процесс назначения событий и приемников событий, а так же функций, обрабатывающих события.

Управление событиями

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

1. Выберите один или более элементов

Для выбора нужных элементов используется выборка jQuery с необходимыми селекторами. Присваивая события, вам следует выбирать элементы, с которыми посетитель будет взаимодействовать. Например, по каким элементам посетитель будет щелкать кнопкой мыши — по ссылке, ячейке таблицы или изображению? Если вы хотите присвоить событие наведения указателя мыши (mouseover), то на какой элемент страницы он должен навести указателя мыши, чтобы действие произошло?

2. Назначьте событие

В библиотеке jQuery существуют функции, эквивалентные большинству событий объектной модели документа (DОМ). Итак, чтобы присвоить событие элементу, вы просто добавляете точку, имя события и пару круглых скобок. Так например, если вы хотите добавить событие наведения указателя мыши к каждой ссылке на странице, то вы можете это сделать следующим образом:

$('а').mouseover ();

Чтобы добавить событие щелчка элементу с ID menu, напишите так :

$('#menu').click ();

Чтобы в момент запуска события что-то происходило, вы должны написать функцию-обработчик события.

3. Напишите функцию, обрабатывающую событие

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

Общая структура анонимной функции выглядит следующим образом:

function () {
// здесь находится ваш код
}

Описание функций

Событие click ():

Событие click запускается, когда вы нажимаете и отпускаете кнопку мыши. Обычно это событие присваивается ссылке, например, с эскизом изображения, при щелчке по которой отображается рисунок большего размера. Однако вы не ограничены только ссылками. Вы можете заставить любой тег реагировать на событие — даже на простой щелчок в любом месте страницы.

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

Событие mouseover ():

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

Функция toggle ():

Функция toggle () переключает текущее состояние элемента. Если элемент в данный момент отображен, то функция toggle () скрывает его. Если элемент скрыт, она заставляет его появиться. Эта функция идеально подходит, когда вам нужен один элемент управления (например, кнопка) для попеременного показа и скрывания элемента.