Студопедия.Орг Главная | Случайная страница | Контакты | Мы поможем в написании вашей работы!  
 

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



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

onfocus – элемент получает фокус, onblur – теряет фокус;

onchange –элемент формы теряет фокус, а его значение изменилось;

onclick, ondblclick – происходит при нажатии мышкой на любой визуальный элемент;

onkeydown/onkeyup – пользователь нажимает/отпускает клавишу на клавиатуре;

onkeypress – пользователь нажимает и отпускает клавишу на клавиатуре;

onload/onunload – происходит, когда документ загружен/ покидается;

onmousedown/ onmouseup – пользователь нажимает/отпускает клавишу мыши;

onmousemove – пользователь двигает курсором мыши над элементом;

onmouseover/onmouseout – указатель мыши попадает/покидает область элемента;

onreset – происходит, когда значения элементов формы сбрасываются;

onselect – происходит, когда пользователь выделяет текст в элементе формы;

onsubmit – происходит, когда пользователь отсылает форму;

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

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

В следующем примере чтобы получить имя браузера, следует нажать кнопку "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>

</body> </html>

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

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

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

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

alert('Click')

}

Следует обратить внимание, что onclick это именно свойство, а не атрибут. Обработчик здесь ананимная функция javascript. Этот код работает также, как код:

<input type="button" onclick=" alert('Click!') "/>

Можно и не создавать анонимную функцию, а использовать обычную:

function doIt() {

alert('Спасибо')

}

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

Свойству присваивается функция-обработчик doIt без скобок, а не doIt(). При использовании свойств элементов HTML - наоборот, скобки нужны:

<input type="button" id="mybutton" onclick="doIt()"/>





Дата публикования: 2014-11-18; Прочитано: 336 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!



studopedia.org - Студопедия.Орг - 2014-2024 год. Студопедия не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования (0.007 с)...