Эксперт по сдаче вступительных испытаний в ВУЗах
Обработка событий
ПРАКТИЧЕСКАЯ РАБОТА
Теоретические сведения
Типы событий мыши можно разделить на два типа: «простые» и «комплексные»:
Простые события:
- Mousedown — Кнопка мыши нажата над элементом.
- Mouseup — Кнопка мыши отпущена над элементом.
- Mouseover — Мышь появилась над элементом.
- Mouseout — Мышь ушла с элемента.
- Mousemove — Каждое движение мыши над элементом генерирует это событие.
Комплексные события:
- Click — Вызывается при клике мышью, то есть при mousedown, а затем mouseup на одном элементе
- Contextmenu — Вызывается при клике правой кнопкой мыши на элементе.
- Dblclick — Вызывается при двойном клике по элементу.
Комплексные можно составить из простых. Но чаще используют одно комплексное Click, чем два простых Mousedown и Mouseup.
Примеры обработки событий мыши:
- Вывод информационного окна при клике мыши по кнопке:
<input type=»button» onclick=»javascript:window.alert(‘Привет!’)” value=»Приветствие»>
- Вывод окна обозревателя при клике мыши по кнопке:
<input type=»button» value=»ford» onClick=»javascript:window.open(‘ford.html’,’example’,’scrollbars, resizable,width=300,height=200,left=100,top=100′)»>
ЗАМЕЧАНИЕ: При выполнении всех заданий добавляйте тег <title> для обозначения номера выполняемого задания, например:
<title> Задание 1_2 </title>
ПРИМЕР 1
В примере на веб-страницу выводится картинка и обтекающий ее текст. При наведении мыши на картинку, она заменяется на такую же, но большего размера. При движении мыши от картинки, она снова становится маленькой.
<html>
<title> Задание 1_1 </title>
<body>
<a href=»#»
OnMouseOver=»document.getElementById(‘B_B’).src=’1_ув.jpg'»
OnMouseOut=»document.getElementById(‘B_B’).src=’1.jpg'»>
<img id=»B_B» src=»1.jpg» border=0 align=»left»></a>
Компания LG Display в своих разработках не стоит на месте. В 2010 году LG представила на суд общественности уникальную электронную новинку — экран на основе электронной бумаги рекордно большого размера.
Самый большой в мире гибкий цветной дисплей имеет ширину 400 мм и высоту 250 мм. Фактически, диагональ в 19 дюймов. При этом толщина экрана составляет всего 0,3 мм.
В 2011- 2012 годах данная технология будет активно использоваться в электронных газетах (устройствах для чтения нового поколения). Электронные газеты по размерам не будут отличаться от печатных газет, но они смогут отображать текстовые изображения, картинки и видео. Контент загружается во встроенную память и может быть обновлен.
</body>
</html>
Задание 1_1
Изменить код Примера 1 так, чтобы картинка становилась снова маленькой не при движении мыши от нее, а при клике на картинку.
Задание 1_2
Добавить еще один рисунок на страницу, применив к нему такой же эффект, как в задании 1_1. Материал страницы разбить на два параграфа: в первый параграф включить первую картинку и часть текста, а во второй – вторую картинку и оставшийся текст.
ЗАМЕЧАНИЕ: обратите внимание, что рисунок выводился с идентификатором id=”B_B”, который использовался в инструкциях по обработке событий «наведение мыши» и «отведение мыши». Для того чтобы написать обработку событий для разных рисунков им всем надо придумать разные идентификаторы. Можно вместо “B_B”, например, использовать идентификаторы “B_1”, “B_2”, и т.д.
Задание 1_3
Материал страницы разбить по ячейкам таблицы, состоящей из 2-х столбцов: в первой строке выводить первую картинку (в первой колонке) и часть текста (во второй колонке), а во второй строке – вторую картинку и оставшийся текст. Эффекты на картинки оставить прежние. Добавьте заголовок таблицы, выделенный цветом и шрифтом, — «Гибкие мониторы».
Задание 1_4
Оставить распределение материала по таблице, как в предыдущем задании.
Изменить код, так, чтобы увеличенные варианты картинок выводились не при наведении, а при клике по их маленьким вариантам и не на ту же страницу, а в отдельное небольшое окно обозревателя. Сделайте для дополнительных окон заголовки страниц «Рисунок».
Дополнить код так, чтобы при наведении мыши на 1-ю маленькую картинку появлялась всплывающая надпись «Газета», а при наведении мыши на 2-ю маленькую картинку появлялась всплывающая надпись «Гибкий экран». Для этого использование обработчика события не требуется. Достаточно при выводе на страницу рисунков в теге img активизировать атрибут title.
ПРИМЕР 2
Запрет на перетаскивание, выделение элементов и на копирование можно сделать, отслеживая события dragstart, selectstart и сontextmenu. Можно написать такой скрипт, что вместо выполнения операции выводится информационное сообщение:
<head>
<script>
document.ondragstart=test
document.onselectstart=test
document.oncontextmenu=test
function test() {
alert(«Запрещено!»);void(0);
return false
}
</script>
</head>
В данном примере все три операции запрещены для любых элементов документа. Такой скрипт можно добавить в раздел заголовка любой защищаемой страницы.
Если же нужно защитить от копирования отдельные элементы документа, то перехватчики событий надо написать в соответствующих тегах:
oncontextmenu=”return false”;
ondragstart=”return false”;
Задание 2_1
Применительно к странице, сформированной по заданию 1_4, установите:
- режим запрета выделения элементов текста с выдачей сообщения «Запрещено выделять элементы»;
- режим запрета вывода контекстного меню с выдачей сообщения «Запрещено использование контекстного меню».
Задание 2_2
Применительно к ссылкам на рисунки со станицы, сформированной по заданию 1_4, установите запрет на копирование первого и второго рисунка. Текст не запрещайте выделять и копировать.
ПРИМЕР 3
В данном примере происходит смена картинки при наведении мыши. Используется каскадная таблица стилей css.
<style type=»text/css»>
.block .images { clear: both; float: left; margin-top: 10px; width: 850px;}
.block .images .left { float: left;}
.block .images .right { float:right; margin-left: 20px;}
.block .images .right img { clear: both; float: right; height: 133px; margin-bottom: 7px; width: 200px; cursor:pointer;}
.block .images .left img { height: 420px; width: 600px;}
.main_image img, .images img { border: 2px solid lightgray;}
</style>
<div class=»block»>
<div class=»images»>
<div class=»left»><img height=»420″ width=»600″ id=»comp» src=»01.jpg» /></div>
<div class=»right»>
<img width=»200″ onmouseout=»changeImg(’01’)» onmouseover=»changeImg(’02’)» src=»02.jpg» />
<img width=»200″ onmouseout=»changeImg(’01’)» onmouseover=»changeImg(’03’)» src=»03.jpg» />
<img width=»200″ onmouseout=»changeImg(’01’)» onmouseover=»changeImg(’04’)» src=»04.jpg» />
</div></div></div>
<script type=»text/javascript»><!—
function changeImg(src){
document.getElementById(‘comp’).src=src+’.jpg’;}
//—></script>
В этом примере картинки размещаются на странице в соответствии со стилем, назначенным своему блоку. Изначально в главном поле страницы выводится рисунок 01. Ему присваивается идентификатор ‘comp’. В правой части – остальные рисунки. При наведении мыши на любой из маленьких рисунков (проверка события onmouseover) вызывается функция changeImg, (параметром для нее является номер рисунка). Эта функция присваивает идентификатор ‘comp’ рисунку с номером, который был передан в функцию. Таким образом, в главном поле отображается новый рисунок.
При отведении же мыши от маленького рисунка (проверка события onmouseout) в главном поле снова появляется первый рисунок.
Задание 3_1
Выберите любые другие три рисунка по теме «Вычислительная техника», поместите их в папку ‘images’, корректно исправьте код функции changeImg, в которой с параметром src надо сцепить слева обозначение пути к новым рисункам.
В качестве главной заставки разместите рисунок «Заставка Часы».
Измените код так, чтобы при отведении мыши от местоположения маленьких рисунков появлялась заставка Часы. А сами рисунки отображались в большом поле не при наведении мыши, и при клике на нее.
Задание 3_2
Требуется выводить не 3, а 4 маленьких рисунка в правой части документа. Измените соответствующим образом код документа.
Ссылка на первоисточник:
http://mgsu.ru
