Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
2
Добавлен:
01.04.2025
Размер:
7.81 Mб
Скачать

Модель событий

Модель событий (Event Model) – это реализация способности JavaScript реагировать на изменение состояния документа в браузере. При возникновении события, например, при нажатии на ссылку или при отправке заполненной формы вызывается код JavaScript или функция - обработчик события. Событие представляет собой указатель на эту функцию и записывается в виде: on+”событие”. Ниже приведены основные события:

onfocus – элемент получает фокус, onblur – теряет фокус; onchange –элемент формы теряет фокус, а его значение изменилось; onclick/ ondblclick – происходит при нажатии мышкой на любой визуальный элемент; onkeydown/onkeyup – пользователь нажимает/отпускает клавишу на клавиатуре; onkeypress – пользователь нажимает и отпускает клавишу на клавиатуре; onload/onunload – происходит, когда документ загружен/покидается; onmousedown/onmouseup – пользователь нажимает/отпускает клавишу мыши; onmousemove – пользователь двигает курсором мыши над элементом; onmouseover/onmouseout – указатель мыши попадает/покидает область элемента; onreset – происходит, когда значения элементов формы сбрасываются; onselect – происходит, когда пользователь выделяет текст в элементе формы; onsubmit – происходит, когда пользователь отсылает форму;

В первых версиях браузеров события определялись как дополнительные атрибуты в дескрипторах HTML. Чтобы обработать какое-либо событие, необходимо добавить в тэг атрибут, соответствующий одному из вышеперечисленных событий. После имени атрибута - события записывается знак равенства, после него указывается значение атрибута. Значением атрибута является обработчик события - функция или группа команд JavaScript.

В следующем примере событие onclick вызывается при нажатии кнопки "Browser", чтобы получить имя и версию браузера

<!-- пример pr15: получение типа и версии браузера -->

<html> <head>

<title>Test of Browser name</title>

</head>

<body>

<h1 align=center>Проверка типа браузера</h1>

<P><hr>

<form name=fr>

<input type=button name=browser value=Browser onClick= "alert(window.navigator.appName+navigator.appVersion)">

</form>

<a href="pr3.htm" onclick="alert('click')"> click me now</a>

<p id="test" onclick="alert('Тест')">Тест</p>

</body> </html>

Имя и версия браузера здесь возвращаются через свойства объекта navigator.appName и navigator.appVersion.

Вместо кода JavaScript после onclick можно написать функцию - обработчик события.

<html>

<head>

<title> pr16-Функция будет исполняться при событии</title>

<script type="text/javascript">

function myalert(){alert('Тест')}

</script>

<body>

<p id="test" onclick="myalert();">Тест</p>

</body>

</html>

Cобытия могут рассматриваться не только как атрибуты, но и как свойства объектов JavaScript. Вот пример установки обработчика события click на элемент с id="button":

<html> <head>

<title> prr-Функция будет иcполнятся при событии</title>

<script type="text/javascript">

function doMy() {

confirm('OK!')

}

</script>

</head>

<body>

<input type="button" id='button' value="Нажми" >

<script>

document.getElementById('button').onclick = function() {

alert('Click')

}

document.getElementById('button').onclick = doMy

</script>

</body> </html>

Здесь onclick свойство, а не атрибут. Обработчиком является анонимная функция. Анонимную функцию можно и не создавать, а использовать обычную:

function doMy() {

alert('OK!')

}

document.getElementById('button').onclick = doMy

Свойству объекта здесь присваивается функция-обработчик doMy без скобок.