J
a v
a S
c r
i p
t: о с н о в ы п р
о г р а м м и р о в а н и я
События в JavaScript
1. Обработчики событий и методы их вызова
Определение. Под событиями понимают действия, выполняемые пользователем в рамках данной страницы: щелчок мыши по гиперссылке или элементу формы; ввод текста в текстовые поля формы; перемещение курсора мыши по странице и др. Технология обработки событий лежит в основе создания динамических html-страниц.
Основные типы событий и их обработчики. Обработка события осуществляется обработчиком, имя обработчика события образуется добавлением приставки on к имени события.
Имя события Событие наступает при Обработчик события
Load завершении загрузки страницы onLoad
Click нажатии кнопки мыши в области onClick
элемента формы или гиперссылки
Focus получении фокуса элементом (окно, фрейм) onFocus
Blur потере фокуса элементом onBlur
Change изменении значения текстового поля onChange
MouseOver перемещении курсора мыши в область onMouseOver
MouseOut элемента (из области элемента) on MouseOut
Select выборе элемента списка в области формы onSelect
Интерпретация события броузером. Каждое событие связано с определённым тегом HTML. Когда пользователь совершит какое-либо действие в области элемента страницы, генерируется событие, которое перехватывает интерпретатор JavaScript и обрабатывает по соответствующему сценарию.
Обработка события. Сценарий обработки события размещают в теле функции, описанной в контейнере <head> function Имя { }</head>.
Обработчик события помещают как атрибут (Имяобработчика=”Имяфункции”) в какой-либо тег HTML.
Таким образом, обработчик события вызывает на выполнение сценарий, записанный в теле функции.
Пример:
<
html>
<head><script>
function Start() {
alert (“Загрузка страницы произошла!”)
}
</script></head>
<body onLoad=”Start()”>
</body>
</html>
По окончании загрузки документа обработчик события onLoad выполнит функцию, описанную в заголовке документа – вывод панели alert с текстом «Загрузка страницы произошла!».
Контрольные вопросы
Что такое событие в языке JavaScript?
Назовите основные события, когда наступает названное событие, каков обработчик?
Как интерпретирует (переводит) обработку события броузер?
Где размещается сценарий обработки события?
Каков способ вызова обработчика события?
Приведите пример обработки события при загрузке страницы onLoad.
2. OnClick как атрибут гиперссылки
Событие Click возникает при щелчке по ссылке, обработку выполняет обработчик onClick.
Задача «Подтверждение гиперссылки». Выполните запрос методом confirm о подтверждении перехода к просмотру документа “primer.htm” для события – активизация пользователем гиперссылки.
<html>
<head><script>
function z1() {
d=confirm(“Прошу подтверждения перехода!”)
if (d==true) {return true}
else {document.bgColor=”cyan”;
return false}
}
</script></head>
<body>
<h1>Подтверждение гиперссылки</h1>
<a href=”primer.htm” onClick=”return z1()”>переход </a>
</body>
</html>
При задании обработчика события onClick в исходном якоре ссылки указано имя функции-обработчика z1(), а также ключевое слово return, возвращающее её результат – нажатие одной из кнопок в панели confirm . При нажатии “ok” (true) броузер начнёт загрузку файла primer.htm, при нажатии “cancel” (false) броузер оставит в своём окне “родной” документ со сменой цвета фона.
Практическая работа «Подтверждение гиперссылки»
Cоздайте файл события.htm и выполните просмотр скрипта в броузере.
Проанализируйте результаты обработки события onClick.
Исследование 1. Дополните тело документа тем же исходным якорем с обработчиком события onMouseOver и проанализируйте результаты обработки события MouseOver.
Исследование 2. Дополните тело документа кнопкой <button>Нажми меня</button>, включив в неё обработчик события onClick, для обработки функции function z2() { } по вашему желанию (например, вывод какого-либо текста и смена фона страницы). Дополните тело документа и тело функции вставкой графического объекта.
Выводы практической работы
Обработчик события onClick, получив результат функции z1() – “true”, передаёт управление исходному якорю, и происходит переход по ссылке. Обработчик onMouseOver не связан с исходным якорем, поэтому тот не реагирует на возвращённый результат “true”, и переход по ссылке не выполняется.
3. OnClick как атрибут формы
Событие Click возникает при нажатии пользователем элемента-кнопки, расположенного в форме.
Задача «Вычислитель». Создайте форму, состоящую из двух однострочных полей ввода и кнопки. Введите арифметическое выражение в первое текстовое поле, и при нажатии кнопки получите результат выражения во втором текстовом поле.
3+2 5 Считай Сброс
<html>
<head><script>
function z3() {
var s=document.F.p1.value;
document.F.p2.value = eval(s);
}
</script></head>
<
body>
<center>
<h1>Вычислитель</h1>
<form name='F'>
<input type=’text’ name='p1' >
<input type=’text’ name='p2' >
<button onClick="z3()">считай </button>
<input type=’reset’>
</form>
</center>
</body>
</html>
Описание тела документа
Два однострочных текстовых поля и кнопка создаются в теле документа, в контейнере <form>…</form>.
Для текстовых полей указаны имена соответственно ‘p1’ и ’p2’, для формы указано имя – ‘F’ В кнопку <button> включён обработчик события onClick, который реализован функцией z3(), расположенной в скрипте контейнера <head>…</head>.
Описание скрипта
В теле функции z3() используются два объекта:
1. Объект document.F.p1.value представляет содержимое первого текстового поля (арифметическое выражение, набранное пользователем).
2. Объект document.F.p2.value представляет содержимое второго текстового поля (результат вычисления арифметического выражения, полученный с помощью функции eval(s))
Имена текстовых полей ‘p1’ и ’p2’ и формы ‘F’ также являются объектами, поэтому при записи содержимого текстовых полей value, необходимо указать всю последовательность вложений объектов друг в друга через точку:
Document.Имя формы.Имя текстового поля.Содержимое текстового поля
Для перемещения результата вычисления из поля ‘p1’ в поле ‘p2’ используется дополнительная переменная s. Для вычисления арифметического выражения, записанного в переменной s, используется встроенная функция JavaScript eval(), которая переводит строку в арифметическое выражение и сразу же вычисляет его.