События
События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями посетителя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий.Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:
<form>
<input type="button" value="Проверьте этот пример" onClick="alert('Это текст')">
</form>
Начало формы
Конец формы
Данный пример имеет несколько новых особенностей - рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой. Первая новая особенность -onClick="alert('Это тест')" в тэге <input>. Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютер должен выполнить вызов alert('Это тест'). Это и есть пример кода на языке JavaScript (обратите внимание, что в этом случае мы даже не пользуемся тэгом <script>).Функция alert()позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Это тест'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда посетитель нажимает кнопку, наш скрипт создает окно, содержащее текст 'Это тест'.Некоторое замешательство может вызвать еще одна особенность данного примера: в команде document.write() мы использовали двойные кавычки ("), а в конструкции alert() - только одинарные. Почему? В большинстве случаев Вы можете использовать оба типа кавычек. Однако в последнем примере мы написали onClick="alert('Это тест')" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написалиonClick="alert("Это тест")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет. Поэтому Вы и вынуждены в данном случае перемежать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки - сперва двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и onClick='alert("Это тест")'.
Вы можете использовать в скрипте множество различных типов функций обработки событий. Сведения о некоторых из них Вы получите в данном курсе лабораторных работ, однако не о всех.
К базовым событиям, поддерживаемым в JavaScript, относятся:
События | Описание |
OnAbort | Происходит при прерывании загрузки графического изображения. |
OnBlur | Происходит, когда какой-либо элемент теряет фокус. |
OnChange | Происходит при изменении значения текстового поля. |
OnClick | Происходит при нажатии кнопки мыши в области элемента . |
OnError | Происходит при ошибке загрузки докумета или графического изображения |
OnFocus | Происходит при получении элементом фокуса. |
OnLoad | Происходит по завершении загрузки страниц или графического изоброжения |
onMouseOver | Происходит при перемещении курсора мыши в области элемента |
onMouseOut | Происходит при перемещении курсора мыши из области элемента |
OnReset | Происходит при нажатии кнопки типа Reset |
OnSelect | Происходит при выборе текста в текстовом поле. |
OnSubmit | Происходит при нажатии кнопки типа Submit |
OnUnload | Происходит при переходе на другую страницу или при завершении работы с браузером. |
Сейчас расмотрим несколько примеров демонстрирующих работу с этими событиями.
- Лекция 1 - Обзор Internet – технологий
- Лекция 2–Основы html
- Тема 1 «Обзор Интернет-технологий»
- Тема 6 «Работа с JavaScript и Java-апплетами»
- Тема 7 «Контент-инжиниринг, эффективность использования Web-представительств»
- 3. Примерный перечень заданий для прохождения тестового контроля
- 4. Примерная тематика рефератов:
- 5.1 Основная литература
- 2.4.2. Методические указания по выполнению практических и лабораторных работ
- Лабораторная работа № 2 – Каскадные таблицы стилей
- Запуск JavaScript
- Размещение JavaScript на html-странице
- Броузеры без поддержки JavaScript
- События
- OnAbort.
- OnMouseOver и onMouseOut
- Оглавление
- Функции
- Иерархия объектов в JavaScript
- Объект location
- Фреймы и JavaScript
- Навигационные панели
- 2.4.3 Методические указания по самостоятельной работе студентов
- 2.Перечень домашних заданий для студентов
- 3. Перечень заданий для самостоятельной работы студентов
- 4. Контрольный тест
- 5. Список литературы
- 5.1 Основная литература
- 2.5.1. Текущий контроль знаний
- 2.8 Дополнительный материал (словари, глоссарий)