 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Модель событий
|
|
Модель событий (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; Прочитано: 338 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
