Использование событий и работа с объектами

Практическая работа №17

Тема: Использование событий и работа с объектами

Цель: закрепление знаний и умения по написанию простых скриптов на JavaScript и включению их на web-страницу.

Время выполнения: 4 часа

Теоретический материал:

Обработчики событий как атрибуты

Обработчики событий (в исходной событийной модели) задаются в виде строк кода JavaScript, присваиваемых как значения атрибутам HTML. Например, чтобы выполнить код JavaScript при щелчке по кнопке, укажите этот код в качестве значения атрибута onclick тега <input>:

<input type="button" value="Нажми меня" onclick="alert('спасибо');">

Значение атрибута обработчика события – это произвольная строка кода JavaScript.

Если обработчик состоит из нескольких инструкций JavaScript, они должны отделяться друг от друга точками с запятой. Например:

<input type="button" value="Click Here" onclick="if (window.numclicks) numclicks++; else numclicks=1; this.value='Click # ' + numclicks;">

Если обработчик события требует нескольких инструкций, то проще определить его в теле функции и затем задать атрибут HTML обработчика события для вызова этой функции. Например, проверить введенные пользователем в форму данные перед их отправкой можно при помощи атрибута onsubmit тега <form>. Проверка формы обычно требует как минимум нескольких строк кода, поэтому не надо помещать весь этот код в одно длинное значение атрибута, разумнее определить функцию проверки формы и просто задать атрибут onsubmit для вызова этой функции. Например, если для осуществления проверки определить функцию с именем validateForm(), то можно вызывать ее из обработчика события следующим образом:

<form action="processform.cgi" onsubmit="return validateForm();">

Код JavaScript в атрибуте обработчика события может содержать инструкцию return, а возвращаемое значение может иметь для броузера специальное значение. Заметьте также, что код JavaScript обработчика события работает в области видимости, отличной от глобального кода JavaScript.

Обработчики событий как свойства

Каждому элементу HTML в документе соответствует объект JavaScript в дереве документа, и что свойства этого объекта соответствуют атрибутам элемента HTML. В JavaScript 1.1 и более поздних версиях это также относится и к атрибутам обработчиков событий. Поэтому если в теге <input> имеется атрибут onclick, к указанному в нем обработчику событий можно обратиться с помощью свойства onclick объекта элемента формы. (JavaScript чувствителен к регистру, поэтому независимо от регистра символов, использовавшегося в имени атрибута HTML, свойство JavaSсript должно быть записано целиком в нижнем регистре.)

Формально спецификация DOM не поддерживает исходную событийную модель, описанную здесь, и не определяет атрибуты JavaScript, соответствующие атрибутам обработчиков событий, стандартизованных в HTML 4. Несмотря на отсутствие формальной стандартизации в DOM, эта событийная модель настолько распространена, что все поддерживающие JavaScript веб-броузеры допускают обращение к обработчикам событий как к свойствам JavaScript.

Так как значение атрибута HTML, определяющего обработчик событий, является строкой кода JavaScript, можно также предполагать, что соответствующее свойство JavaScript также представляет собой строку. Но это не так: при обращении через JavaScript свойства обработчиков событий представляют собой функции. Это проверяется с помощью простого примера:

<input type="button" value="Нажми меня" onclick="alert(typeof this.onclick);">

Если нажать кнопку, откроется диалоговое окно, содержащее слово «function», а не слово «string». (Обратите внимание, что в обработчиках событий ключевое слово this ссылается на объект, в котором произошло событие). Для того чтобы назначить обработчик события элементу документа с помощью JavaScript, установите свойство-обработчик события равным нужной функции. Рассмотрим, например, следующую форму HTML:

<form name="f1"> <input name="b1" type="button" value="Нажми меня">
</form>

На кнопку в этой форме можно сослаться с помощью выражения document. f1.b1, значит, обработчик события можно установить с помощью следующей строки кода:

document.f1.b1.onclick=function() { alert('Спасибо!'); };

Кроме того, обработчик события может быть установлен вот так:

function plead() { window.status = "Пожалуйста, нажми меня!"; }

document.f1.b1.onmouseover = plead;

Обратите особое внимание на последнюю строку: здесь после имени функции нет скобок. Чтобы определить обработчик события, мы присваиваем свойству-обработчику события саму функцию, а не результат ее вызова.

В представлении обработчиков событий в виде свойств JavaScript есть два преимущества. Во-первых, это сокращает смешивание кода HTML и JavaScript, стимулируя модульность и позволяя получить более ясный и легко сопровождаемый код. Во-вторых, благодаря этому функции-обработчики событий являются динамическими. В отличие от атрибутов HTML, которые представляют собой статичную часть документа и могут устанавливаться только при создании документа, свойства JavaScript могут изменяться в любое время. В сложных интерактивных программах иногда полезно динамически изменять обработчики событий, зарегистрированные для элементов HTML. Один небольшой недостаток определения обработчиков событий в JavaScript состоит в том то, что это отделяет обработчик от элемента, которому он принадлежит. Если пользователь взаимодействует с элементом документа до его полной загрузки (и до исполнения всех его сценариев), обработчики событий для элемента могут быть еще не определены.

Явный вызов обработчиков событий

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

Например, если для определения функции проверки формы мы задали атрибут onsubmit тега <form> и хотим проверить форму в какой-то момент до попытки передачи ее пользователем, мы можем обратиться к свойству onsubmit объекта Form для вызова функции-обработчика события. Код может выглядеть следующим образом:

document.myform.onsubmit();

Обратите, однако, внимание, что вызов обработчика события не является способом имитации действий, происходящих при реальном возникновении этого события. Если, например, мы вызовем метод onclick объекта Link, это не заставит броузер перейти по ссылке и загрузить новый документ. Мы лишь выполним ту функцию, которую определили в качестве значения этого свойства. Чтобы заставить броузер загрузить новый документ, необходимо установить свойство location объекта Window.

То же самое справедливо для метода onsubmit объекта Form или метода onclick объекта Submit: вызов метода запускает функцию-обработчик события, но не приводит к передаче данных формы. (Чтобы на самом деле передать данные формы, мы вызываем метод submit() объекта Form.)

Одна из причин, по которой может быть нужен явный вызов функции-обработчика события – желание дополнить с помощью JavaScript обработчик события, который (возможно) уже определен кодом HTML. Предположим, что вы хотите предпринять специальные действия, когда пользователь щелкает по кнопке, но не хотите нарушать работу любого обработчика события onclick, который мог быть определен в самом HTML-документе. (Это один из недостатков кода в примере 19.1 – добавляя обработчик для каждой гиперссылки, он переписывает любые обработчики onclick, уже определенные для этих гиперссылок.) Этот результат достигается с помощью следующего кода:

var b = document.myform.mybutton; // Это интересующая нас кнопка
var oldHandler = b.onclick; // Сохраняем обработчик события HTML
function newHandler() { /* Здесь расположен мой код обработки события */ }
// Теперь назначаем новый обработчик события, вызывающий как новый, так и
// старый обработчик.

b.onclick = function() { oldHandler(); newHandler(); }

Значения, возвращаемые обработчиками событий

Во многих случаях обработчик события (заданный либо атрибутом HTML, либо свойством JavaScript) использует возвращаемое значение для указания поведения. Например, если с помощью обработчика события onsubmit объекта Form выполняется проверка формы и выясняется, что пользователь заполнил не все поля, то можно вернуть из обработчика false, чтобы предотвратить фактическую передачу данных формы. Гарантировать, что форма с пустым текстовым полем не будет передана, можно с помощью следующего кода:

<form action="search.cgi" onsubmit="if (this.elements[0].value.length == 0) return false;"> <input type="text"> </form>

Как правило, если в ответ на событие броузер выполняет некоторые действия по умолчанию, можно вернуть false, чтобы предотвратить выполнение этого действия. Вернуть false для отмены действия по умолчанию можно также из обработчиков событий onclick, onkeydown, onkeypress, onmousedown, onmouseup и onreset.

Из правила о возвращении false для отмены действия есть одно исключение: когда пользователь перемещает мышь над гиперссылкой (или изображением-картой), по умолчанию броузер отображает URL ссылки в строке состояния. Чтобы этого не случилось, необходимо вернуть true из обработчика onmouseover.

Например, можно вывести сообщение, отличное от URL, с помощью следующего кода:

(a href="help.htm" onmouseover="window.status='Помогите!!'; return true;")Help(/a)

Обратите внимание, что от обработчиков событий никогда не требуется обязательно явно возвращать значение. Если значение не возвратить, то выполняется действие по умолчанию.

Обработчики событий и ключевое слово this

Если обработчик события определен с помощью атрибута HTML или свойства JavaScript, ваши действия состоят в присваивании функции свойству элемента документа. Другими словами, вы определяете новый метод элемента документа. Ваш обработчик события вызывается как метод элемента, в котором произошло событие, поэтому ключевое слово this ссылается на этот целевой элемент. Это поведение полезно и не удивительно. Однако убедитесь, что понимаете следствия этого поведения. Предположим, у вас есть объект o с методом mymethod. Обработчик события можно зарегистрировать следующим образом:

button.onclick= o.mymethod;

В результате выполнения этой инструкции button.onclick ссылается на ту же функцию, что и o.mymethod. Эта функция теперь является методом и для o и для button. Вызывая этот обработчик события, броузер вызывает функцию как метод объекта button, а не метод объекта o. Ключевое слово this ссылается на объект Button, а не на ваш объект o. Для того чтобы сделать это, необходимо дать явное указание, например, так:

button.onclick = function() { o.mymethod(); }

Область видимости обработчиков событий

Функции в JavaScript относятся к лексическому контексту. Это значит, что они работают в той области видимости, в которой они определены, а не в той, из которой вызываются. Если обработчик собыия определяется путем присваивания атрибуту HTML строки кода Java-Script, то при этом неявно определяется функция JavaScript (что можно было видеть при проверке типа соответствующего свойства-обработчика события в JavaScript). Важно понимать, что область видимости для обработчика события, определенного подобным образом, не совпадает с областью видимости других глобальных функций JavaScript, определенных обычным образом. Это значит, что обработчики событий, определенные в виде атрибутов HTML, выполняются в контексте, отличном от контекста других функций.

Обработчики событий, определенные как атрибуты HTML, имеют более сложную цепочку областей видимости, чем описанная выше. Началом цепочки областей видимости является объект вызова. Здесь определены любые аргументы, переданные обработчику события, а также любые локальные переменные, определенные в теле обработчика. Следующим объектом в цепочке областей видимости является, однако, не глобальный объект, а объект, который вызвал обработчик события. Предположим, что объект Button в форме HTML определяется с помощью тега <input>, а затем посредством задания атрибута onclick определяется обработчик события. Если в коде обработчика есть переменная с именем form, то она разрешается в свойство form объекта Button. Это может быть удобным при создании обработчиков событий в виде атрибутов HTML.

Цепочка областей видимости обработчика события не заканчивается на объекте, определяющем обработчик события: она продолжается вверх по иерархии. Для описанного выше обработчика события onclick цепочка областей действия начинается с объекта вызова функции-обработчика. Затем она продолжается объектом Button. После этого она продолжается по иерархии элементов HTML и включает, как минимум, элемент HTML <form>, содержащий кнопку, и объект Document, содержащий форму. Точный состав цепочки областей видимости никогда не был стандартизован и зависит от реализации. Netscape 6 и Mozilla включают все объекты-контейнеры (даже такие, как теги <div>), а IE 6 ограничивается более узким набором, включающим целевой элемент плюс содержащий его объект Form (если он существует) и объект Document. Независимо от броузера последним объектом в цепочке областей является объект Window, как и всегда в клиентском JavaScript.Наличие целевого объекта в цепочке областей действия может быть полезным. Заметьте, например, что и объект Window и объект Document определяют методы с именем open(). Если идентификатор open применяется без уточнения, то почти всегда имеет место обращение к методу window.open(). Однако в обработчике события, определенном как атрибут HTML, объект Document расположен в цепочке областей видимости до объекта Window, и отдельный идентификатор open будет ссылаться на метод document.open(). Аналогично, посмотрим, что будет происходить, если добавить свойство с именем window к объекту Form (или определить поле ввода с name=»window»). В этом случае, еси определить внутри формы обработчик события, в котором есть выражение window.open(), идентификатор window разрешится как свойство объекта Form, а не как глобальный объект Window, и у обработчиков событий внутри формы не будет простого способа для обращения к глобальному объекту Window или вызова метода window.open()!

При определении обработчиков событий как атрибутов HTML необходима аккуратность. Подобным образом лучше создавать только очень простые обработчики. В идеале они должны просто вызывать глобальную функцию, определенную в другом месте, и, возможно, возвращать ее результат:

<script> function validateForm() {/* Код проверки формы */return true;}
</script>

<input type="submit" onclick="return validateForm();">

При исполнении простого обработчика событий, подобного приведенному выше, все еще действует цепочка областей видимости, отличающаяся от обычной, и можно нарушить функционирование обработчика, определив метод validateForm() в одном из элементов, содержащих данный. Но если предположить, что необходимая глобальная функция все-таки вызвана, она будет исполняться в глобальной области видимости. Несмотря на это, следует помнить, что при исполнении функций используется область видимости, в которой они определены, а не в область видимости, из которой они вызываются. Несмотря на то что метод validateForm() вызывается из области видимости, которая отличается от обычной, он будет выполняться в собственной глобальной области видимости.

Кроме того, поскольку нет стандарта на точный состав цепочки областей видимости для обработчика события, лучше всего предполагать, что она содержит только целевой элемент и глобальный объект Window. Например, ссылаться на целевой элемент посредством this, а если целевым является элемент <input>, ссылаться на содержащий его объект Form с помощью form. Но не полагайтесь на наличие в цепочке областей видимости объектов Form или Document. Например, не используйте идентификатор write без спецификации для обращения к методу write() документа, а точно указывайте интерпретатору, что имеете в виду document.write().

Задания:

Задание 1.     Используя JavaScript, сделайте так, чтобы при клике на кнопку исчезал элемент с id="hide"

Задание 2.     Создайте кнопку, при клике на которую, она будет скрывать сама себя.

Задание 3.     Создайте меню, которое раскрывается/сворачивается при клике:

Задание 4.     Есть список сообщений. Добавьте каждому сообщению по кнопке для его скрытия:

Лошадь

Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.

Осёл

Домашний осёл или ишак - одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.

Корова, а также пара слов о диком быке, о волах и о тёлках.

Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.

Ход работы:

1.   Запустите сервер.

2.   Создайте в своём каталоге папку с номером работы.

3.   Для решения первого задания используются тэги: <form>, <input>. Для создания текстового поля в гэге <input> необходимо указать атрибут type=text, для создания кнопки - type=button. Для вывода сообщения используется функция alert.

4.   Во втором задании для проверки отсутствия данных в поле применяется оператор if Для перевода курсора на новую строку при выводе данных можно использовать оператор

5.   Для вывода столбца в третьем задании используйте параметрический цикл. Данные обязательно должны заключаться в ячейки таблицы. Для этого перед циклом запишите тэг начала таблицы, в цикле создавайте и закрывайте строки и ячейки, а после цикла – тэг закрытия таблицы. Решение реализуется без использования массива.

Контрольные вопросы:

1.   Что такое событие в JavaScript?

2.   Что представляет собой обработчик событий?

3.   Как организовать явный вызов обработчиков событий?

4.   Для чего используется команда this?

Скачано с www.znanio.ru