Лабораторная работа №5. Обработка событий
Задание 18
Инструкция: Наведите курсор на текст ниже и уберите его
События onMouseOver и onMouseOut
При наведении курсора текст центрируется, при уходе — выравнивается по левому краю.
Задание 19
Инструкция: Наведите курсор на текст ниже и уберите его
Событие onMouseOver
При наведении меняется выравнивание и цвет текста.
Задание 20 - Обработка событий в родительском элементе
Инструкция: Щёлкните по любому из элементов ниже (слово "ЦВЕТ", прямоугольникам или фону)
ЦВЕТ
Внешний
прямоугольник
Внутренний
прямоугольник
Все элементы обрабатываются одной функцией через всплытие событий. Щелчок по любому элементу изменяет его цвет.
Задание 21
Инструкция: Взаимодействуйте с элементами ниже согласно описанию
- Пять событий с мышкой
- Щёлкните по мне мышкой
-
На этом тексте нажмите, подержите и отпустите левую кнопку мышки
-
Медленно проведите курсором мышки по этой надписи
Задание 21 (дополнительное) - Изображение с подписью
Инструкция: Щёлкните по изображению для его замены, по подписи - для изменения цвета текста
Жмякни на меня
Щелчок по изображению меняет его на другое. Щелчок по подписи меняет цвет текста. Можно нажимать многократно.
Задания 22 и 23 - Блокировка всплытия событий (cancelBubble)
Инструкция: Щёлкните по элементам - события не всплывают к родителю благодаря cancelBubble
ЦВЕТ
Внешний
прямоугольник
Внутренний
прямоугольник
События заблокированы с помощью cancelBubble и stopPropagation(). Щелчок по элементу не вызывает изменение родительского контейнера.