Всё для Учёбы — студенческий файлообменник
1 монета
pdf

Студенческий документ № 005298 из ИУБиП

Лабораторное занятие № 8

Тема: Модель событий в JavaScript

Цель: Рассмотреть приемы работы с моделями событий

Задание:

1 Создайте документ с использованием функции вывода сообщения.

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

3 Создать документ согласно методическим указаниям.

Необходимые приборы: ПК, текстовый редактор Блокнот, браузер

Методические рекомендации к выполнению лабораторной работы:

Методические рекомендации к выполнению задания 1 В JavaScript 1.2 поддерживается обработка следующих событий:

Abort Focus MouseOut Submit Blur KeyDown MouseOver Unload Click KeyPress MouseUp Change KeyUp Move DblClick Load Reset DragDrop MouseDown Resize Error MouseMove Select

Изучая таблицу, можете увидеть, что была реализована обработка некоторых новых событий. На этом уроке мы и рассмотрим некоторые из них.

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

window.onresize= message; function message() {

alert("Размер окна изменен!"); }

Пожалуйста, измените размер этого окна.

При открытии окна в браузере появится строка "Пожалуйста, измените размер окна". Когда вы начнте изменять размер окна, то выйдет сообщение:

Встрокеwindow.onresize= message;

мы задаем процедуру обработки такого события. Точнее, функция message() будет вызываться всякий раз, как только пользователь изменит размер окна. JavaScript 1.2 ничего нового здесь не привносит. Например, если объект button, то можно определить процедуру обработки события следующим образом:

Однако Вы можете написать это и по-другому:

...

document.myForm.myButton.onclick= message;

function message() {

alert('Click event occured!'); }

Можно подумать, что вторая альтернатива немного сложнее. Однако почему тогда именно ее мы используем в первом скрипте? Причина состоит в том, что объект window нельзя определить через какой-либо определенный тэг - поэтому нам и приходится использовать второй вариант. Не следует писать window.onResize - имеется в виду, что нужно писать все прописными буквами; не нужно ставить после message скобки. Если написать window.onresize= message(), то браузер интерпретирует message() как вызов функции. Однако в нашем случае мы не хотим напрямую вызывать эту функцию - мы лишь хотим определить обработчик события.

Методические рекомендации к выполнению задания 2

В язык JavaScript 1.2 добавлен новый объект Event. Он содержит свойства, описывающие некое событие. Каждый раз, когда происходит какое-либо событие, объект Event передается соответствующей программе обработки.

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

Кодскрипта:

Как видите, в тэг мы поместили программу обработки событий onClick, как это мы уже делали в предшествующих версиях JavaScript. Новое здесь заключается в том, что для создания окошка с сообщением мы используем event.x и event.y. А это как раз и есть объект Event, который здесь нам нужен, чтобы узнать координаты мыши.

Все команды помещены в тэг . Благодаря этому мы получаем в сообщении координаты относительно данного слоя, т.е. в нашем случае относительно самого изображения. В противном же случае мы получили бы координаты относительно окна браузера (инструкция return false; используется здесь для того, чтобы браузер обрабатывал далее данную ссылку)

Объект Event получил следующие свойства:

Свойство Описание data Массив адресов URL оставленных объектов, когда происходит событие DragDrop. layerX Горизонтальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет ширину окна браузера. layerY Вертикальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет высоту окна браузера. modifiers Строка, задающая ключи модификатора - ALT_MASK, CONTROL_MASK, META_MASK или SHIFT_MASK pageX Горизонтальное положение курсора (в пикселах) относительно окна браузера. pageY Вертикальное положение курсора (в пикселах) относительно окна браузера. screenX Горизонтальное положение курсора (в пикселах) относительно экрана. screenY Вертикальное положение курсора (в пикселах) относительно экрана. target Строка, представляющая объект, которому исходно было послано событие. type Строка, указывающая тип события. which ASCII-значение нажатой клавиши или номер клавиши мыши. x Синоним layerX y Синоним layerY

Методические рекомендации к выполнению задания 3

Одна из важных особенностей языка - перехват события. Если кто-то, к примеру, щелкает на кнопке, то вызывается программа обработки события onClick, соответствующая этой кнопке. С помощью обработки событий Вы можете добиться того, чтобы объект, соответсвующий вашему окну, документу или слою, перехватывал и обрабатывал событие еще до того, как для этой цели объектом указанной кнопки будет вызван обработчик событий. Точно так же объект вашего окна, документа или слоя может обрабатывать сигнал о событии еще до того, как он достигает своего обычного адресата. Создайте новый документ со скриптом:

window.captureEvents(Event.CLICK); window.onclick= handle; function handle(e) { alert("Объект window перехватывает это событие!"); return true; // т.е. проследить ссылку}

"Кликните" поэтойссылке.

Как видно, мы не указываем программы обработки событий в тэге

. Вместо этого мы пишем window.captureEvents(Event.CLICK);

с тем, чтобы перехватить событие Click объектом window. Обычно объект window не работает с событием Click. Однако, перехватив, мы затем его переадресуем в объект window.

Заметим, что в Event.CLICK фрагмент CLICK должен писаться заглавными буквами. Если же Вы хотите перехватывать несколько событий, то Вам следует отделить их друг от друга символами |. Например:

window.captureEvents(Event.CLICK | Event.MOVE);

Помимо этого в функции handle(), назначенной нами на роль обработчика событий, мы пользуемся инструкцией return true;. В действительности это означает, что браузер должен обработать и саму ссылку, после того, как завершится выполнение функции handle(). Если же Вы напишете вместо этого return false;, то на этом все и закончится.

Если теперь в тэге Вы зададите программу обработки события onClick, то поймете, что данная программа при возникновении данного события вызвана уже не будет. И это не удивительно, поскольку объект window перехватывает сигнал о событии еще до того, как он достигает объекта link. Если же Вы определите функцию handle() как function handle(e) { alert("Объект window перехватывает это событие!"); window.routeEvent(e); return true;}

то компьютер будет проверять, определены ли другие программы обработки событий для данного объекта. Переменная e - это наш объект Event, передаваемый функции обработки событий в виде аргумента.

Кроме того, Вы можете непосредственно послать сигнал о событии какому-либо объекту. Для этого Вы можете воспользоваться методом handleEvent(). Это выглядит следующим образом:

window.captureEvents(Event.CLICK); window.onclick= handle; function handle(e) {

document.links[1].handleEvent(e);

} "Кликните" по этой ссылке

Вторая ссылка

Все сигналы о событиях Click, посылаются на обработку по второй ссылке - даже если Вы вовсе и не щелкнули ни по одной из ссылок!

Следующий скрипт демонстрирует, как Ваш скрипт может реагировать на сигналы о нажатии клавиш. Нажмите на какую-либо клавишу и посмотрите, как работает этот скрипт.

window.captureEvents(Event.KEYPRESS);

window.onkeypress= pressed; function pressed(e) {

alert("Key pressed! ASCII-value: " + e.which); }

Вопросы для самоконтроля:

1 Обработка каких событий поддерживается в JavaScript 1.2?

2 Какие события отвечают за действия клавиатуры?

3 Для чего предназначена функция Resize?

4 Для чего предназначена функция Click?

Показать полностью… https://vk.com/doc62771886_249148528
256 Кб, 11 декабря 2013 в 10:52 - Россия, Ростов-на-Дону, ИУБиП, 2013 г., pdf
Рекомендуемые документы в приложении