Лабораторная работа № 10. Обработка событий на JavaScript

4 часа

Клиентские программы на языке JavaScript основаны на модели программирования, когда выполнение программы управляется событиями. При таком стиле программирования Web-браузер генерирует событие, когда с документом или некоторым его элементом что-то происходит. Например, Web-браузер генерирует событие, когда завершает загрузку документа, когда пользователь наводит указатель мыши на гиперссылку или нажимает клавишу на клавиатуре.

События в JavaScript разделяются на системные: события мыши и события клавиатуры.

К системным событиям относятся: load – загрузка страницы и unload – выгрузка ее.

События мыши: click – клик; dblclick – двойной клик; mouseover – наведение курсора мыши на элемент; mousemove – перемещение курсора мыши над элементом; mouseout – уведение курсора мыши с элемента; mousedown – нажатие левой кнопки мыши; mouseup – отпускание левой кнопки мыши; contextmenu – нажатие правой кнопки мыши и вывод контекстного меню.

Для того чтобы обратить внимание пользователя на определённый элемент HTML-документа, можно менять свойства этого элемент при попадании на него курсора мышки, а при снятии курсора восстанавливать прежние значения свойств. Например, можно менять цвет или размер элемента. Попадание курсора мышки на элемент фиксируется событием onMouseOver. Парное для него событие onMouseOut происходит при снятии курсора мышки с элемента.

Другая пара событий onMouseDown и OnMouseUp происходит при нажатии и отпускании левой кнопки мышки. Эту пару событий удобно применять для изменения свойств элементов или замены элементов на время удержания кнопки мышки нажатой.

События клавиатуры – это keypress – , keydown – , keyup – .

Для того чтобы написать ответную реакцию на событие, создают обработчик события (event handler), который, как правило, представляет собой функцию.

Назначить обработчик события можно в виде: атрибута элемента; безымянной функции; именованной функции или с помощью метода addEventListener().

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

Тип события – это строка, определяющая тип действия, вызвавшего событие. Тип mousemove, например, означает, что пользователь переместил указатель мыши. Тип keydown означает, что была нажата клавиша на клавиатуре, а тип load – что завершилась загрузка документа, или какого-либо другого ресурса из сети. Поскольку тип события – это просто строка, его иногда называют именем события.

??? Цель события – это объект, в котором возникло событие или с которым это событие связано. Когда говорят о событии, обычно упоминают тип и цель события. Например, событие load объекта Window или событие click элемента <button>. Самыми типичными целями событий в клиентских приложениях на языке JavaScript являются объекты Window, Document и Element, но некоторые типы событий могут происходить и в других типах объектов.

Обработчик события – это функция, которая обрабатывает, или откликается на событие. Приложения должны зарегистрировать свои функции обработчиков событий в web-браузере, указав тип события и цель.

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

Порядок выполнения работы: создать html-документ, содержащий строку и изображение с подписью

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

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

1 Какие виды событий используются в JavaScript?

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

3 Как назначить обработчик событий?

4 Какие события JavaScript относятся к системным?

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

6 Что понимается под типом события?

7 Что означают типы событий mousemove и keydown?

8 Что понимается под целью события?

9 Что такое обработчик событий?

10 Что означает тип события load?