Информатика и выч. техника \ Информатика

JAVAScript как универсальное средство создания интерактивных Web-страниц, страница 11

3.6. Объект event

Объект event предоставляет информацию, связанную с событием в сценарии. Этот объект доступен только в случае возникновения последовательности событий.

Основные свойства объекта event

srcElement

Возвращает элемент, который первый сгенерировал событие

type

Возвращает имя сгенерированного события.

clientX, clirentY,

x, y

Координаты указателя мыши относительно левого верхнего угла окна браузера

offsetX, offsetY

Координаты указателя относительно координат элемента, вызвавшего событие

screenX, screenY

Координаты указателя мыши относительно левого верхнего угла экрана

altKey

Возвращает true, если нажата клавиша Alt

ctrlKey

Возвращает true, если нажата клавиша Ctrl

shiftKey

Возвращает true, если нажата клавиша Shift

button

Идентифицирует нажатую кнопку мыши (0 – ни одна кнопка не нажата, 1 – нажата левая кнопка, 2 – нажата правая кнопка, 3 -  нажата средняя кнопка)

Пример. Отображение координат указателя мыши в строке состояния при его перемещении над документом.

<html>

<script language=javascript>

var str="Test";

str=str.bold();

</script>

<style type="text/css">

body{font-family: arial; font-size: 10pt}

span{position:absolute; left:100}

</style>

<body onmousemove="window.status=

' clientX: ' + window.event.clientX +

' clientY: ' + window.event.clientY+

'  x: ' + window.event.x +

'  y: ' + window.event.y +

' offsetX: ' + window.event.offsetX +

' offsetY: ' + window.event.offsetY +

' screenX: ' + window.event.screenX +

' screenY: ' + window.event.screenY" >

<br><br><br>

<span> Привет!!!

</span>

</body>

</html>

Пример. Перемещение слоев.

В теги позицированных фрагментов текста добавляется пользовательский атрибут dragEbld, информирующий программу о том, что фрагмент  можно перемещать. Наличие у фрагмента текста требуемого атрибута проверяется с помощью метода getAttribute(). 

При определении перемещаемого фрагмента, его zIndex увеличивается на 1, чтобы перемещаемый слой находился "выше" всех остальных.

<html>

<script language=javascript>

var n=1;

var draggedEl=null;

var shiftX, shiftY;

function moveMouse(){

if((event.button==1)&&(draggedEl!=null)){

draggedEl.style.pixelTop = event.clientY - shiftY;

draggedEl.style.pixelLeft= event.clientX - shiftX;

}

}

function isDragEnabled(el){

if(el!=null){

if(el.getAttribute("dragEbld") != null) return el;

}

return null;

}

function pressMouseDown(){

var el = isDragEnabled(event.srcElement);

if(el != null){

draggedEl = el;

shiftX = event.offsetX;

shiftY = event.offsetY;

draggedEl.style.zIndex=++n;

}

}

</script>

<body onmousedown = "pressMouseDown();"

onmousemove = "moveMouse();"

onmouseup = "draggedEl = null;" >

<h2 style="position:absolute; left:100; top:100; color:red; z-index:1" dragEbld>

Добро пожаловать!

</h2>

<h2 style="position:absolute; left:100; top:300;

z-index:1" dragEbld>

Wellcome!

</h2>

</body>

</html>

4. Задания для самостоятельной работы

4.1. Проверка корректности ввода текстовых данных.

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

№

Текстовое поле

Ограничения

1.

Фамилия

Буквы русского алфавита.

Первая - заглавная

2.

Имя

3.

Отчество

4.

Число, месяц и год рождения

Шаблон: dd-mm-yyyy.

Например, 18-10-1986. Предусмотреть

ограничения на вводимые числа

5.

e-mail

Латинский шрифт, цифры.

Первый символ – буква. Предусмореть

наличие разделителей: @ и .

6.

Логин

Первый символ – буква.

Не менее 6 символов

7.

Пароль

Не может содержать одни цифры.
Скачать файл