на главную

Действия по умолчанию

Помимо всплывания событий многие события имеют действия по умолча¬нию. Действие по умолчанию является действием, которое браузер выпол¬няет в ответ на событие. Например, действием по умолчанию в ответ на на¬жатие ссылки <А HREF= "... "> является переход по указанному адресу ц загрузка страницы.
В объектной модели динамического HTML можно заменять существующие действия по умолчанию на индивидуальную модель поведения. Если собы¬тие не имеет действия по умолчанию и создается индивидуальная модель поведения, то рекомендуется отменить возможное действие по умолчанию Это гарантирует правильное выполнение программы, если действие по умолчанию будет позднее поддерживаться браузером.
Действие по умолчанию не всегда определяется источником события — оно может определяться родительским элементом. В приведенном выше приме¬ре, когда пользователь нажимает кнопку мыши на изображении, действие по умолчанию по переходу к указанной ссылке определяется элементом Anchor (ссылка), который содержит изображение. Однако если изображение отменяет действие по умолчанию для события, то действие по умолчанию для данной ссылки больше не будет действовать, поскольку действие по умолчанию может быть отменено любым элементом в цепочке событий. По¬сле того как обработчик событий устанавливает отмену действия по умолча¬нию, оно отменяется для всей цепочки событий.
Всплывание событий и действия по умолчанию представляют собой различ¬ные концепции, которыми можно управлять независимо. Например, если изображение останавливает событие в момент всплывания к ссылке, но не отменяет действие по умолчанию, то действие по умолчанию для ссылки будет применено к событию и будет осуществлен переход по ссылке. Обрат¬ное также справедливо: если ни ссылка, ни изображение не отменят дейст¬вие по умолчанию, но действие по умолчанию отменяется, когда событие достигает элемента Body, то переход по ссылке не будет осуществлен. Свой¬ства для отмены действия по умолчанию или остановке всплывания события описаны в разделе "Объект evenf ниже в данной главе.
Связывание событий
Связывание событий представляет собой создание связи между определен ным событием и сценарием. Динамический HTML поддерживает ряд неза висимых от языка методов по связыванию сценариев с событиями. KpotA

Атрибуты событий


В динамическом HTML все элементы документа были изменены для под¬держки событий клавиатуры и мыши. Данные события представлены как атрибуты непосредственно для каждого элемента, что позволяет устанавли¬вать прямую связь между элементом и его поведением. Данная связь сходна со связью между элементом и встроенным стилем при использовании атри¬бута STYLE. Например, можно связать событие onclick (нажатие кнопки) с функцией с помощью атрибута, как показано в приведенном ниже примере:
Когда пользователь щелкает по кнопке мыши, вызывается функция foo().
<INPUT TYPE=BUTTON VALUE= "Нажмите здесь" ONCLICK= "foot);" LANGUAGE= "JavaScript">
Атрибут ONCLICK может вызвать функцию или немедленно выполнить одну или большее число строк кода. В данном примере, когда пользователь на¬жимает кнопку мыши, вызывается процедура foo. Атрибут LANGUAGE опреде¬ляет язык, на котором написана программа. Пропуск атрибута LANGUAGE ус¬танавливает по умолчанию язык, указанный на первой странице или Java¬Script в отсутствие других сценариев. Приведенный ниже пример демонст¬рирует две встроенных инструкции, которые выполняются при нажатии пользователем кнопки:
При нажатии кнопки мыши отображать сообщение и затем вызвать ФУНКЦИЮ foo()
TYPE=BUTTON VALUE= "Нажмите здесь" CLICK= "alert ( 'Пользователь нажал здесь . ' ) ; foo ( ) ; " Е=JavaScript">
сначала выводит окно сообщения, а затем вызывает функцию foo.
атрибуты HTML являются нечувствительными к регистру, регистр символов
не имеет значения при использовании атрибутов, например ONCLICK, для
зьшания обработчиков с событиями. Чувствительность к регистру может
быть важна, когда используются другие механизмы связывания событий.
Связывание событий с атрибутами HTML удобно, но имеет ряд недостатков Первый недостаток заключается в том, что требуется расширять язык HTML каждый раз при изобретении нового события. Например, в приведенном вы¬ше примере событие onclick подразумевает расширение определения типа документа (DTD, document type definition) за счет включения в тег <INPUT> атрибута ONCLICK. Это усложняет добавление событий стандартным способом, поскольку HTML развивается медленно. Более того, объекты или приложе¬ния, которые генерируют произвольные события, также требуют расширения языка или представления их собственных методов связывания событий. По¬этому данный подход используется только для небольшого набора встроенных событий. Если в страницу внедрен произвольный объект, то его события представлены более общим способом.
Поддержка общих событий
Второй механизм связывания лишен указанных выше недостатков. Данный механизм использует новые расширения элемента script — атрибуты FOR и EVENT — для связывания функций с событиями. Атрибут EVENT ссылается на событие и все параметры, которые ему могут быть переданы. Атрибут FOR указывает имя или идентификатор (ID) элемента, для которого написано событие. Например, событие onmousemove представлено в документе. Вы мо¬жете использовать тег <SCRIPT> для связывания с данным событием:
<SCRIPT FOR= "document" EVENT= "onmousemove() LANGUAGE» JavaScript">
// Данный обработчик событий вызывается, когда указатель мыши
// перемещается по документу.
</SCRIPT>

Примечание

JavaScript является чувствительным к регистру для обоих значений атрибутов EVENT и FOR тега <SCRIPT>. Следует убедиться, что все имена событий набра¬ны в нижнем регистре для встроенных событий и в соответствующем регистре для внедренных объектов. Кроме того, если вы определяете идентификатор (ID) в атрибуте FOR, вы должны набрать их в точном соответствии с тем, как они набраны в атрибуте ID самого элемента. Если событие не возникает, то всегда проверяйте правильность ввода символов и регистра в теге <SCRIPT>.
Следует принять к сведению следующее предостережение относительно приведенного выше синтаксиса. Netscape Navigator игнорирует атрибуты FOR и EVENT и попытается выполнять программу немедленно. В приведенном ниже коде используется прием для обхода данного ограничения:
<SCRIPT LANGUAGE= " JavaScript ">
//Предположим, что браузер поддерживает атрибут FOR.
var ForSupport=true;
<SCRIPT FOR= "fakeObject" EVENT= "foo" LANGUAGE= "JavaScript">
//Данное событие не существует.
// Если атрибуты FOR и EVENT поддерживаются, то данный код не будет
//выполняться.
ForSupport=false;
</SCRIPT>
<SCRIPT FOR= "document" EVENT= "onmousemove" LANGUAGE= "JavaScript">
if (ForSupport) {
//Код действительного обработчика событий.
else
alert("Ваш браузер не поддерживает необходимый синтаксис события.");
</SCRIPT>
Для того чтобы гарантировать, что код сценария не будет выполняться, сле¬дует указать, что используется язык JScript. JScript представляет собой реа¬лизацию JavaScript компании Microsoft. Поскольку Microsoft Internet Explorer является единственным браузером, который поддерживает JScript, в сценарии не требуется инструкция if, которая должна быть проигнори¬рована Netscape.
<SCRIPT FOR= "document" EVENT= "onmousemove() "LANGUAGE= "JScript">
// Данный обработчик событий вызывается, когда указатель мыши
// перемещается по документу, если браузер поддерживает ядро языка JScript.
</SCRIPT>

Примечание

При указании имени события скобки необязательны. Например, приведенное выше событие может быть определено как EVENT= "onmousemove".
Связывание событий в стиле Visual Basic
°мимо обсуждавшихся выше методов язык VBScript также поддерживает еханизм связывания сценариев с событиями в стиле Visual Basic. Visual Basic традиционно связывает код с событием с помощью специальной процедуры. Если процедура написана в формате Visual Basic, то ядро Visual Basic знает, какие события должны быть связаны со сценарием. Например,
Введенный ниже код связывает событие onmousemove с событием onclick в
документе:
LANGUAGE= "VBScript"> document_onMouseMove ( )

Управление указателем this

Приведенный ниже код демонстрирует три различных способа связывания обработчика с событием. Все три обработчика эквивалентны.
<INPUT NAME= "myBtn" TYPE=BUTTON VALUE= "My Button"
ONCLICK= "alert(this.name);" "LANGUAGE= "JavaScript">
ИЛИ
<SCRIPT FOR= "myBtn" EVENT= "onclick()" LANGUAGE= "JavaScript">
alert(this.name); </SCRIPT>
ИЛИ
<SCRIPT LANGUAGE= "JavaScript">
myBtn.onclick= new Function("alert(this.name)"); </SCRIPT>
В этих примерах элемент this.name возвращает значение элемента myBtr, поскольку ссылка на элемент дается прямо во встроенном коде или сцена¬рии. Если требуется сослаться на элемент в процедуре, вызываемой обра¬ботчиком событий, то потребуется передать элемент в процедуру с помощью ключевого слова this. Например, приведенный ниже код отобразит пустую строку вместо текста myBtn, поскольку указатель this в функции foo ссыла¬ется на саму функцию, вместо элемента, который генерирует событие:
<SCRIPT LANGUAGE= "JavaScript">
function foo () (
//Указатель this не ссылается на кнопку.
alert(this.name); }
</SCRIPT> <INPUT TYPE=BUTTON NAME= "myBtn" VALUE= "My Button"
ONCLICK= "foo();" LANGUAGE= "JavaScript">
Вместо этого вы должны передать ссылку на элемент myBtn в функцию fоо используя ключевое слово this:
<SCRIPT LANGUAGE= "JavaScript">
function foo(b) {
// Аргумент Ь ссылается на кнопку, поскольку она передается
// обработчиком событий, alert(b.name); }
</SCRIPT>
<INPUT TYPE=BUTTON NAME= "myBtn" VALUE= "My Button" ONCLICK= "foo(this);" LANGUAGE= "JavaScript">
указатель this также автоматически устанавливается, когда обработчик собьггий назначается в качестве указателя функции:
<Hl ID= "myHl"> Это заголовок. </Н1> <SCRIPT LANGUAGE^ "JavaScript">
function clickHandler() {
//Свойство this указывает на элемент, с которым связан обработчик, alert(this.tagName)
}
//Указатель функции не должен передавать указатель this.
document.all.onclick=clickHandler; </SCRIPT>
Имена во встроенном коде идентифицируются путем поиска членов объектной модели в следующем порядке:

Разделяемые обработчики событий

JavaScript поддерживает создание разделяемого обработчика событий. В JavaScript все элементы, которые совместно используют одно имя, могут также совместно использовать одинаковые обработчики событий с помощью атрибутов FOR и EVENT элемента script:
<SCRIPT FOR= "gender" EVENT= "onclick() "LANGUAGE= "JavaScript">
'/Данный обработчик событий выполняется при нажатии любого элемента
'/с именем или идентификатором "ID".
</SCRIPT>
<INPUT TYPE= RADIO NAME= "gender" VALUE= "Male">
<INPUT TYPE= RADIO NAME= "gender" VALUE= "Female">
Данный метод работает только в JavaScript. VBScript может запускать обработчика событий таким образом только на основе уникального идентификатора ID элемента, а не его имени NAME. Если бы данный код был переписан в VBScript, то потребовалось бы указать уникальные значения идентификаторов для кнопок-переключателей и написать отдельный обработчик событий для каждой кнопки.
Альтернативой VBScript, которая также работает для любого языка написания сценариев, является использование процедуры всплывания событий и отслеживание события, начиная с родительского контейнера:
<SCRIPT FOR= "GenderGroup" EVENT= "onclick () "LANGUAGE= "VBScript">
'Данный обработчик событий выполняется при нажатии любого элемента в
'блоке GenderGroup.
If "gender" = window. event . srcElement .name Then
'Пользователь нажал кнопку-переключатель.
End If
</SCRIPT>
<DIV ID= "GenderGroup">
<INPUT TYPE= RADIO NAME= "gender" VALUE= "Male">
<INPUT TYPE= RADIO NAME= "gender" VALUE= "Female">

Объект event

Многие события сами по себе не представляют интереса без дополнительной информации. Например, событие onmousedown бесполезно, если неиз¬вестно, какая была нажата кнопка мыши и каково было положение указате¬ля мыши в момент нажатия. События клавиатуры бесполезны, если неиз¬вестно, какая была нажата клавиша.
Динамический HTML представляет независимый от языка механизм доступа к информации, связанной с событием, и управления всплыванием собы¬тия и возникновением действия по умолчанию. Данная информация пред¬ставлена посредством объекта event, который является свойством объекта window.
До возникновения события объект event инициализируется с учетом текущего состояния клавиатуры и мыши. Объект event предоставляет доступ к параметрам события и обеспечивает контроль всплывания событий и выполнения действий по умолчанию. Объект event всегда представляет как минимум набор перечисленных ниже свойств для идентификации элемента, который запустил последовательность событий, и для управления всплыванием событий и действием по умолчанию:
event.srcElement event.cancelBubble event.returnValue
Свойство srcElement возвращает элемент, который первым сгенерировав событие. Например, при нажатии изображения, изображение является свойством srcElement по мере того, как событие всплывает через ссылку, тело и документ.
Свойство cancelBubble используется для прекращения всплывания элемент в направлении вверх по иерархии. По умолчанию значение данного свойства равно false и событие всплывает. Установка значения true для данного свойства останавливает всплывание только текущего экземпляра события, но не препятствует всплыванию последующих событий.
Свойство returnValue используется преимущественно для отмены действия по умолчанию события. Не все события имеют действия по умолчанию. Однако если вы пишете код, который изменяет поведение события, то всегда отменяйте действие по умолчанию так, чтобы если действие по умолчанию будет добавлено к событию в будущем, то поведение страницы не изменилось. Для отмены действия по умолчанию для данного свойства должно быть установлено значение false.
Свойство returnValue наиболее часто используется для отмены действия по умолчанию события, но некоторые события используют свойство returnValue отличным способом. Это снова приводит к разделению всплывания событий и действий по умолчанию.

Примечание

JavaScript поддерживает возвращение значений непосредственно обработчику событий, используя ключевое слово return. Ключевое слово return обновляет свойство returnValue объекта event, когда обработчик событий возвращает управление браузеру.
Объект event устанавливается для каждой последовательности событий. Поэтому любые назначения объекта event применимы только к экземпляру последовательности событий. При следующем возникновении события объект event сбрасывается. Отмена действия по умолчанию, например, отменя¬ет только действие по умолчанию для текущего события, а не для всех по¬следующих событий. По этой причине к объекту event должен обращаться
обработчик событий, а не код, который выполняется в ходе загрузки страницы.
Определение события
Объект event представляет тип события посредством свойства type. Свойство type возвращает имя события в нижнем регистре без префикса on. Например событие onmousedown возвращается как mousedown. Зная тип события, один обработчик может различать и обрабатывать различные события:
function handleEvent ( ) {
//запуск обычного обработчика событий.
Switch (event.type) {
Case “click”:
// обработка события onclick.
Break;
Case “mousedown" :
//Обработка события onmousedown. break;
//Присоединяет события к обработчику событий handEvent. document.onclick=handleEvent
document.onmousedown=handleEvent;
Доступ к параметрам посредством объекта event
Объект event представляет все параметры встроенных событий как свойства. Например, информация о текущем положении указателя мыши доступна для всех событий. Некоторая информация доступна только для определенного события. События мыши также обеспечивают доступ к текущему со¬стоянию кнопок мыши. Данные параметры инициализируются и обновля¬ются до генерации события. Приведенный ниже пример иллюстрирует про¬цедуру доступа к параметрам события:
<SCRIPT FOR= "document" EVENT= "onmousedown() "LANGUAGE= "JavaScript">
//Вывод состояния кнопки мыши при ее нажатии.
alert("x:" +event.clientX);
alert("y:" +event.clientY);
alert("button:" +event.button);
alert("Source Element:" +event.srcElement.tagName);
</SCRIPT>