Событие в браузере и обработчик события
JavaScript-код, расположенный в теге <script>, исполняется один раз при загрузке страницы. Все приведённые ранее примеры не реагируют на действия пользователя. Теперь мы будем программировать реакцию страницы на действия пользователя.
В окне браузера происходят различные события: пользователь двигает курсором мыши по странице, при этом курсор наводится на различные HTML-элементы. Иногда пользователь щёлкает мышью на каком-то элементе. (Какой единственный HTML-элемент может самостоятельно реагировать на наведение мыши и щелчок?). Браузер постоянно отслеживает движение мыши по HTML-элементам. Событие — это сигнал от HTML-элемента о том, что что-то произошло. Например, по нему щёлкнули мышью.
На языке JavaScript записывается обработчик события, описывающий, что должен браузер выполнить при возникновении этого события. Например, написать что-то на странице, вызвать новое окно и тому подобное. Мы уже знакомы с двумя примерами обработчиков событий: document.write("Эти слова написаны на JavaScript!"); window.alert('Привет!'); В этих двух случаях событием является загрузка страницы в браузер. При загрузке страницы браузер выполняет заданный обработчик события. Графически работу рассмотренных скриптов можно изобразить так:
В последующих примерах мы часто будем использовать кнопку. В курсе основ HTML при изучении форм мы уже познакомились с этим элементом: <input type="button" value="Нажми меня" />
События, генерируемые html-элементами
Обозначения всех событий начинается с on.
Событие onclick — щелчок мыши. Пример: onclick="window.alert('Спасибо!');" Здесь при щелчке мыши на каком-то HTML-элементе браузер вызовет окно предупреждения.
Событие записывается как атрибут в открывающий тег, а обработчик события — как значение атрибута. В примере ниже окно предупреждения появится при щелчке на кнопке: <input type="button" value="Нажми меня" onclick="window.alert('Спасибо!');" />
Этот код в действии: пример на сайте http://webuchitel.ru/JavaScript/js_01.html
З
адание
1
В приведённом выше примере укажите название тега, его атрибуты, событие, объект, метод, аргумент метода.
Совершенно аналогично событие и обработчик задаётся любому HTML-элементу, например параграфу: <p onclick="window.alert('Спасибо.')">Щёлкни по мне!</p>
З
адание
2
Во временной странице Untitled-1.html добавьте следующие HTML-элементы:
заголовок h1 «Я изучаю JavaScript»,
кнопку с надписью «Пуск»,
какую-нибудь небольшую картинку.
Для каждого HTML-элемента запрограммируйте вызов окна сообщения при щелчке мыши. В окнах должны быть соответствующие надписи:
«Это заголовок»,
«Это кнопка»
«Это картинка».
Заметьте, что Dreamweaver даёт подсказку в виде выпадающего списка атрибутов-событий. Для этого, как обычно, внутри открывающего тега вставьте пробел.
С
обытие
onmouseover
— наведение мыши. Пример:
<p
onmouseover="window.alert('Ой!
Ты
задел меня!')">Не трогай меня
курсором.</p>
Задание 3
Во временной странице Untitled-1.html создайте таблицу из одной строки и двух ячеек:
в первой ячейке напишите слова “Щёлкни по тексту!” и добавьте скрипт, который при щелчке на этих словах вызывает окно сообщения “Молодец!”;
во второй ячейке напишите слова “Наведи на меня мышь!” и добавьте скрипт, который при наведении мыши на этих словах вызывает окно сообщения “Какой ты ловкий!”
Событие onChange — изменение текста. Оно возникает при изменении информации в текстовом поле. Это событие удобно использовать для проверки того, что ввёл в поле пользователь.
В пособии «Основы HTML» мы познакомились c управляющими элементами input, которые позволяют пользователю вводить свои данные. Текстовое поле создаётся тегом input type="text".
Задание 4
Создайте текстовое поле и напишите для него сценарий, по которому после изменения текста и ухода курсора из него вызывалось окно сообщения «Вы изменили текст — уверены, что он правильный?».
Что
должно получиться
Этот код в действии: пример на сайте http://webuchitel.ru/JavaScript/js_01.html
Переключатель (радиокнопка) создаётся тегом input type="radio", он может быть либо установлен, либо сброшен. Переключатели объединяются в группы связанных элементов, имеющих одинаковые значения атрибутов name. При установке одного из переключателей в группе другие переключатели сбрасываются.
Д
ля
программирования реакции на изменение
переключателя в каждый из них записывают
обработчик события onclick. Когда пользователь
щёлкает на переключателе, элемент
вызывает свой обработчик для изменения
другого HTML-элемента.
Задание 5
Сделайте группу из трёх переключателей (радиокнопок), которые реагировали бы на переключение выдачей соответствующего сообщения.
Что должно получиться
Первая
кнопка
Вторая
кнопка
Третья
кнопка
JavaScript позволяет программисту отслеживать и другие манипуляции пользователя с мышью. Для этого существуют следующие события:
onclick — щелчок левой кнопкой мыши на элементе ondblclick — двойной щелчок левой кнопкой мыши на элементе onmouseover — наведение курсора мыши на элемент onmouseout — уход курсора мыши с элемента onmousedown — нажатие кнопки мыши на элементе onmouseup — отпускание кнопки мыши на элементе onmousemove — движение курсора мыши по элементу
Существуют также события, связанные с клавиатурой. Их можно увидеть в подсказке Dreamweaver.
Ссылки по теме: javascript.ru и metod-kopilka.ru.
document. |
объект: HTML-документ |
write() |
метод: вставляет текст в HTML-документ |
window. |
объект: окно браузера |
alert() |
метод: диалоговое окно сообщения |
onclick |
событие: щелчок мыши |
onmouseover |
событие: наведение мыши |
onChange |
событие: изменение текста |