Эскорт-услуги в Москве от Queens Palace


GOUSPO студенческий портал!

форум, учебники, лекции, и многое другое

Мар

31

Обработчики событий.

Автор: admin

Обработчики событий.

Событие это действие, которое произвел пользователь (щелчок на ссылке или кнопке, наведение указателя на какой-либо объект, щелчок в текстовом поле перед началом его заполнения).
Обработчики событий подпрограммы, которые позволяют программисту отслеживать действия пользователя (интерпретируемые как события), по отношению к отображенной в окне браузера html странице.
События, связанные с мышью.

Событие Описание
onClick Щелчок мышью на элементе
onDblClick Двойной щелчок мышью на элементе
onMouseDown Кнопка мыши нажата
onMouseUp Кнопка мыши отпущена
onMouseMove Указатель мыши перемещен в область элемента
onMouseOver Указатель мыши расположен над элементом
onMouseOut Указатель мыши перемещен за границы области элемента

События, связанные с клавиатурой.

Событие Описание
onKeyDown Клавиша нажата
onKeyUp Клавиша отпущена
onKeyPress Клавиша нажата и отпущена

События, связанные с выбором элементов и редактированием форм.

Событие Описание
onFocus Элемент выбран (получен фокус)
onSelect Часть текста внутри элемента выделена
onChange Данные в элементе были изменены
onBlur Элемент перестал быть выбранным (потерян фокус)

Обработка значений из формы.

Пример:

<html>

<head>

<title>Обработка значений из формы</title>

<script>

<!

function care(a, h){

var s = a * h / 2

document.write(Площадь треугольника равна , s);

return S

}

//></script>

</head>

<body>

<form name=form1>

Основание:   <input type=text size=5>

Высота:  <input type=text size=5>

<input type=button value=Вычислить>

</form>

</body>

</html>

Передача параметров по ссылке.
В этом случае параметром функции станет объект и тогда говорят, что передача параметра осуществляется по ссылке или по наименованию.

<html>

<head>

<title>Передача параметров по ссылке</title>

<script>

<!

function care(a, h){

var s = a.value * h.value / 2

document.write(Площадь треугольника равна , s)

}

//></script>

</head>

<body>

<form name=form1>

Основание:   <input type=text size=5>

Высота:   <input type=text size=5>

<input type=button value=Вычислить>

</form>

</body>

</html>

В качестве фактических параметров в вызове функции care1 выступают имена текстовых полей формы.
Использование имени формы в качестве параметра функции.

<html>

<head>

<title>Использование имени формы в качестве параметра функции</title>

<script>

<!

function care(obj){

var a = obj.st1.value

var h = obj.st2.value

var s = a * h / 2

document.write(Площадь треугольника равна , s)

}

//></script>

</head>

<body>

<form name=form1>

Основание:   <input type=text size=5>

Высота:   <input type=text size=5>

<input type=button value=Вычислить>

</form>

</body>

</html>

В предыдущих примерах вычислялось значение переменной S и для его вывода применялся метод write объекта document.
Определим в форме поле площадь, в котором будем помещать вычисленное значение.

<html>

<head>

<title>Помещение вычисленного значения в поле</title>

<script>

<!

function care(obj){

var a = obj.st1.value

var h = obj.st2.value

var s = a * h / 2

obj.res.value = s

}

//></script>

</head>

<body>

<form name=form1>

Основание:   <input name=st1 size=5>

Высота:   <input name=st2 size=5>

<input type=button value=Вычислить>

Площадь:   <input name=res size=5>

</form>

</body>

</html>

Оператор присваивания в качестве значения параметра обработки событий.

<html>

<head>

<title>Оператор присваивания</title>

</head>

<body>

<form name=form1>

Основание:   <input name=st1 size=5>

Высота:      <input name=st2 size=5>

<input value=Вычислить onClick=form1.res.value = form1.st1.value * form1.st2.value / 2>

Площадь:     <input name=res size=5>

</form>

</body>

</html>

Вычисление среднего дохода.
Вводится информация о доходах за каждый месяц с первого полугодия. Определить средний доход в месяц за рассматриваемый период.

<html>

<head>

<title>Вычисление среднего дохода</title>

<script>

<!

function val(obj){

var a1 = 1 * obj.num1.value

var a2 = 1 * obj.num2.value

var a3 = 1 * obj.num3.value

var a4 = 1 * obj.num4.value

var a5 = 1 * obj.num5.value

var a6 = 1 * obj.num6.value

var s = (a1 + a2 + a3 + a4 + a5 + a6) / 6

obj.res.value = s

}

//></script>

</head>

<body>

<form name=form1>

Январь:      <input name=num1 size=8>

Февраль:     <input name=num2 size=8>

Март: <input name=num3 size=8>

Апрель:      <input name=num4 size=8>

Май:  <input name=num5 size=8>

Июнь: <input name=num6 size=8>

<input value=Вычислить onClick=val(form1)>

<input value=Сбросить>

Средняя зарплата:    <input name=res size=8>

</form>

</body>

</html>

Обработка события onClick выполняется по щелчку мыши на кнопке Вычислить.
Реакция на событие onChange.
Вычислить площадь квадрата. В форме определяем 2 текстовых поля: одно для длины стороны квадрата, другое для вычисленной площади.
Площадь квадрата вычисляется, когда значение элемента формы с именем num1 изменилось и элемент потерял фокус.

<html>

<head>

<title>Реакция на событие onChange</title>

<script>

<!

function srec(obj){

obj.res.value = obj.num1.value * obj.num1.value

}

//></script>

</head>

<body>

</body>

<form name=form1>

Сторона:     <input name=num1 size=8>

Площадь:     <input name=res size=8>

<input value=Обновить>

</form>

</html>

Обработка события onFocus.
Площадь квадрата должна вычисляться в тот момент, когда пользователь переходит к элементу формы с помощью клавиши Tab или щелчка мыши.

<html>

<head>

<title>Обработка события onFocus</title>

<script>

<!

function srec(obj){

obj.res.value = obj.num1.value * obj.num1.value

}

></script>

</head>

<body>

<form name=form1>

Сторона:     <input name=num1 size=8>

Площадь:     <input name=res size=8>

<input value=Обновить>

</form>

</body>

</html>

Обработка события onBlur.
Площадь должна вычисляться в тот момент, когда элемент формы теряет фокус.

<html>

<head>

<title>Обработка события onBlur</title>

<script>

<!

function srec(obj){

obj.res.value = obj.num1.value * obj.num1.value

}

></script>

</head>

<body>

<form name=form1>

Сторона: <input size=8 onBlur=srec(form1)>

Площадь:     <input name=res size=8>

<input value=Обновить>

</form>

</body>

</html>

Обработка события onSelect.
Площадь должна вычисляться в тот момент, когда выбирается часть или весь текст в текстовом поле.

<html>

<head>

<title>Обработка события onSelect</title>

<script>

<!

function srec(obj){

obj.res.value = obj.num1.value * obj.num1.value

}

></script>

</head>

<body>

<form name=form1>

Сторона:     <input name=num1 size=8>

Площадь:     <input name=res size=8>

<input value=Обновить>

</form>

</body>

</html>

Перестановка двух изображений.
При нажатии на кнопку Обменять изображения меняются местами.

<html>

<head>

<title>Перестановка двух изображений</title>

<script>

<!

function chpict(){

var l = document.pm1.src

document.pm1.src = document.pm2.src

document.pm2.src = l

}

//></script>

</head>

<body>

<img src=m1.gif>

<img src=m2.gif>

<form name=form1>

<input value=Обновить onClick=chpict()>

</form>

</body>

</html

Ваш отзыв


− 3 = два