Лабораторная работа № 12. Основные события JQuery

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

Момент, в который произошло событие, называется запуском события. События могут срабатывать при выполнении различных операций с веб-страницей. Помимо этого, и сам браузер может стать источником событий.

Управление веб-страницей производится с помощью следующих событий: мыши; документа/окна; форм; клавиатуры; jQuery, объекта события.

События мыши: почему ()??? Это же не метод

.click() – запускается при нажатии и отпускании кнопки мыши, применяется к ссылкам, картинкам, кнопкам, абзацам, блокам и так далее;

.dblclick() – запускается при двойном нажатии и отпускантт кнопки мыши, например при откритии какой-либо папки;

.mousedown() – происходит во время нажатия кнопки мыши, например, при перетаскивании элементов;

.mousemove() – запускается при перемещении указателя мыши по элементу;

.mouseout() – запускается при отпускании кнопки мыши.

События документа/окна:

.load() – запускается, когда браузер загрузит все файлы веб-страницы: html-файлы, внешние css и Javascript файлы, медиа-файлы;

.resize() – запускается, когда пользователь изменяет размер окна браузера;

.scroll() – запускается, когда пользователь использует полосы прокрутки, либо прокручивает веб-страницу с помощью колесика мыши, или же используете для этих целей клавиши клавиатуры (pgup, pgdn, home, end);

.unload() – запускается, когда пользователь собирается покинуть страницу, щелкая по ссылке для перехода на другую страницу, закрывает вкладку страницы или окно браузера.

События форм:

.blur() – запускается, когда поле формы выводится из фокуса, например при переходе в другое поле формы;

.change() – запускается при изменении статуса поля формы, например при выбора пункта из выпадающего меню;

.focus() – запускается при переходе в поле формы, щелкая в нем кнопкой мыши или клавишей табуляции;

.reset() – позволяет вернуть форму в первоначальное состояние, отменив сделанные изменения;

.select() – запускается при выделении текста внутри текстового поля формы;

.submit() – запускается при отправлении заполненной формы с помощью щелчка по кнопке «Отправить» или нажатии клавиши «Enter», когда курсор помещен в текстовом поле.

События клавиатуры:

.keydown() –  запускается при нажатии клавиши, перед событием keypress.

.keypress() – запускается при нажатии на клавишу, до тех пор, пока клавишу не будет отпущена;

.keyup() – запускается при отпускании клавишу.

События jQuery:

.hover() – позволяет одновременно решить две задачи, связанные с событием наведения указателя мыши и событием снятия указателя мыши в отношении выбранного объекта;

.toggle() – работает аналогично событию hover(), с разницей в том, что оно запускается от щелчка кнопкой мыши. Например, можно открыть выпадающее меню одним щелчком и скрыть вторым.

Объект события:

При запуске события браузер сохраняет информацию о нём в объекте события, который содержит данные, собранные в момент, когда событие произошло. Обработка события происходит с помощью функции, при этом объект передается функции как аргумент – переменная evt.

Объект события имеет различные свойства, наиболее распространённые из которых следующие:

pageX – расстояние (px) от указателя мыши до левого края окна браузера;

pageY – расстояние (px) от указателя мыши до верхнего края окна браузера;

screen – расстояние (px) от указателя мыши до левого края монитора;

screenY – расстояние (px) от указателя мыши до верхнего края монитора;

shiftKey – TRUE, если когда происходило событие, была нажата клавиша SHIFT;

which – используется для определения числового кода нажатой клавиши (вместе с shiftKey);

target – означает, что по объекту события щелкнули кнопкой мыши (например, для события click());

data – объект, использованный с функцией bind() для передачи данных функции, управляющей событием.

Порядок выполнения работы

Таблица 12.1 – Варианты заданий

Контрольные вопросы

1 Что представляют собой события jQuery?

2 С помощью каких событий производится управление web-страницей?

3 Какие события мыши Вы знаете?

4 Что такое объект события?

5 Какие события документа/окна Вы знаете?

6 Какие события клавиатуры Вы знаете?

7 Какие события форм Вы знаете?

8 Какие события jQuery Вы знаете?

9 В каком объекте браузер сохраняет информацию о событии при его запуске?

10 Какие свойства объекта события Вы знаете?

Часть 2. Серверное программирование