Вызов процедуры обработки события
В JavaScript каждое событие порождает ассоциированный с ним объект event.Этот объект содержит всю информацию о событии и его можно передать процедуре обработки события.
Вызов процедуры обработки события можно осуществить двумя способами:
· явно – назначив ссылку на процедуру обработки события в соответствующем свойстве объекта
· неявно – в атрибуте обработки события тега соответствующего элемента
Каждый объект JavaScript, создаваемый для элементов документа HTML, имеет свойства, ассоциированные с возможными событиями, которые могут быть сгенерированы для этого элемента. Присвоив этому свойству в качестве значения ссылку на процедуру обработки события, мы и определим процедуру, которая будет вызываться при возникновении соответствующего события. Например, следующий код определяет процедуру showEventType как процедуру обработки события mousedown кнопки формы:
<FORM NAME="form1">
<INPUT TYPE="button" NAME="button1" VALUE="Узнай событие">
<SCRIPT>
document.form1.button.onmousedown = showEventType
</SCRIPT>
</FORM>
Сама процедура задается следующим кодом (объект event в IE доступен просто по своему имени):
// В IE
function showEventType() {
alert("Произошло событие: " + event.type)
}
Второй, неявный вызов процедуры обработки события требует задания обращения к ней в атрибуте onmousedown в открывающем теге элемента INPUT:
<FORM NAME="form1">
<INPUT TYPE="button" NAME="button1" VALUE="Узнай событие"
onmousedown = "showEventType()" >
</FORM>
Событийная модель
Любое событие имеет свой "жизненный" цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий браузера. Цикл жизни любого типичного события JavaScript включает следующие этапы:
1. Происходит действие пользователя или возникает условие, которое возбуждает событие
2. Тотчас же корректируется объект event, чтобы отразить параметры возникшего события
3. Событие генерируется – это и есть истинное сообщение о возникшем событии
4. Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу
5. Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это "всплытие" вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии – объект window, или обработчик события какого-либо объекта не аннулирует событие
6. Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано.
4Пример 19. "Всплытие" события
В этом примере щелчок на любом элементе HTML страницы приводит к отображению диалогового окна с надписью "Не надо щелкать".
<HTML>
<HEAD><TITLE>"Всплытие" события</TITLE>
</HEAD>
<BODY ID='body' onclick="alert('Не надо щелкать!');" >
<H1 ID='head1'>Привет!</H1>
<P ID='parag1'>Это простой пример, <B ID='bold1'>ну очень простой</B> пример.
</BODY>
</HTML>
Возникнув, событие начинает подниматься вверх по иерархии вложенных объектов HTML. Например, если щелчок произошел на элементе bold1, то путь "всплытия" события будет bold1, parag1 и body. Причем для каждого из указанных элементов JavaScript будет просматривать наличие атрибута onclick и выполнять действия, предопределенные его значением. В нашем случае такой атрибут задан только для родителя body, а поэтому только заданный в нем код и будет выполняться при щелчке на любом элементе или просто в теле документа.
Если к какому-нибудь элементу добавить собственный обработчик событий onclick, то будут выполнены две процедуры: самого элемента и элемента родителя. Если элемент расположен достаточно глубоко в иерархии объектов, и каждый элемент, расположенный выше него, имеет также собственный обработчик событий, то событие будет обрабатываться всеми обработчиками, если только в каком-то обработчике не будет аннулировано его "всплытие" вверх по иерархии объектов.
Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует, и обработчики этого события всех, расположенных выше элементов, не вызываются.
4Пример 20. Аннулирование "всплытия" события
Аннулирование "всплытия" события в элементе bold1 приводит к тому, что щелчок на нем не отображает диалогового окна из обработчика этого события в элементе body. Для всех остальных элементов это действие продолжает выполняться.
<HTML>
<HEAD><TITLE>Аннулирование события</TITLE>
</HEAD>
<BODY ID='body' onclick="alert('Не надо щелкать!');" >
<H1 ID='head1'>Привет!</H1>
<P ID='parag1'>Это простой пример,
<B ID='bold1' onclick="window.event.cancelBubble=true" >ну очень простой</B> пример.
</BODY>
</HTML>
Объект event (IE)
Объект eventсоздается автоматически всякий раз, когда возникает какое-либо событие. Этот объект не зависит от используемого языка создания сценария, и его использование в процедурах обработки событий для получения информации о сгенерированном событии является предпочтительным способом получения достоверной информации о событии.
Каждое событие характеризуется параметрами, которые передаются в сценарий через свойства объекта event. Существуют параметры, общие для всех типов событий (например, координаты курсора мыши в окне браузера) и специфические для определенного события (например, код нажатой клавиши для событий клавиатуры). Свойства объекта event, как и сам он, являются динамическими и создаются в зависимости от типа произошедшего события. При описании свойства, если не оговорено противное, подразумевается, что оно является общим для всех типов событий.
Свойство type хранит строку с названием происшедшего события: mousedown, load, click и т. д.
Свойство srcElementопределяет элемент документа, явившийся источником события. Оно может быть полезным при централизованной обработке событий элементом, расположенным выше в иерархии объектов документа истинного "виновника" события, и, в зависимости от типа элемента, программа-обработчик может предпринять соответствующие действия.
Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов, рассмотрено ранее.
Свойство returnValueявляется булевым и возвращает значение true или false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным false, то это отменяет выполнение действий по умолчанию. Так, для элемента A действием по умолчанию является переход по ссылке, задаваемой атрибутом HREF.
По значениям свойств altKey, ctrlKeyи shiftKeyэлемента-источника события определяется, была ли нажата, соответственно, клавиша <Alt>, <Ctrl> или <Shift> в момент возникновения события (правая или левая неважно). Значение свойства равно true, если клавиша была нажата, и false в противном случае. Свойства ctrlLeft, altLeft и shiftLeft позволяют определить, была ли нажата в момент возникновения события левая из указанных в названии свойств клавиша.
Следующий фрагмент сценария отменяет переход по любой связи в документе, если при щелчке на ней была нажата клавиша <Shift>:
4Пример 21. Отмена перехода по гиперсвязи
document.onclick=click;
function click() {
if((window.event.srcElement.tagName=='A') && window.event.shiftKey) {
window.event.returnValue=false;
}
}
Установка значения свойства returnValue равным false не аннулирует событие. Оно продолжает "всплывать" по иерархии объектов. Отменяется только действия по умолчанию элемента, являющегося источником события.
Для событий мыши определены свойства, значениями которых являются координаты положения курсора в момент возникновения события.
Свойства clientXи clientYпредставляют координаты относительно области отображения браузера, offsetXи offsetYявляются координатами относительно элемента-контейнера, в котором расположен элемент-источник события, screenXи screenY– абсолютные координаты курсора мыши, т.е. координаты экрана монитора. Все значения этих свойств определены в пикселях.
Свойства xи yопределяют положение курсора мыши по горизонтали и вертикали относительно позиционированного контейнера, содержащего элемент-источник события. Если ни один контейнер не позиционирован, то положение определяется относительно тела документа <BODY>.
Полезное свойство событий мыши buttonопределяет нажатую кнопку мыши (только для событий onmousedown, onmouseup и onmousemove):
| Значение | Нажаты кнопки мыши |
| ни одна | |
| Левая | |
| Правая | |
| Одновременно левая и правая | |
| Средняя | |
| Одновременно левая и средняя | |
| Одновременно правая и средняя | |
| Все три одновременно |
Свойства toElementи fromElementприменимы только к событиям onmouseover и onmouseout. Они определяют, от какого элемента и к какому перемещался курсор мыши, и полезны при анализе этих действий для вложенных элементов.
Свойство keyCode хранит ASCII-код нажатой клавиши клавиатуры при событиях onkeydown, onkeyup и onkeypress. Для события onkeydown свойство repeat равно true, если оно происходило непрерывно два и более раз (нажата и удерживается клавиша) и false в противном случае.
Для события onmousewheel, если свойство wheelDelta имеет значение -120, то колесо вращалось на себя, если 120, то от себя.
4Пример 22. Изменение размеров картинки
Свойство каскадных таблиц стилей zoom (расширение компании Microsoft к свойствам каскадных таблиц стилей, вошедших в рекомендации консорциума WWW) позволяет изменять масштаб отображения элемента HTML на странице, отображаемой в окне браузера. Его значением является коэффициент изменения размера элемента HTML по сравнению с его нормальным размером. Он задается в виде вещественного числа или в виде процента. Значения от нуля до единицы или от 0% до 100% приводят к уменьшению изображения элемента, а значения большие единицы или 100% к увеличению. В примере отслеживается поворот колесика мыши, когда указатель расположен над рисунком (элемент IMG), и увеличение (поворот колесика "на себя") или уменьшение (поворот колесика "от себя") значения свойства zoom элемента IMG на 5%, что приводит к увеличению или уменьшению размеров рисунка.
<HTML>
<HEAD>
<SCRIPT>
var count = 100;
function picture()
{
if (event.wheelDelta <= -120)
count += 5;
else if (event.wheelDelta >= 120)
count -= count <= 10 ? 0 : 5;
event.srcElement.style.zoom = count + "%";
window.status= event.srcElement.style.zoom;
}
</SCRIPT>
</HEAD>
<BODY>
<img src="sample.jpg" onmousewheel="picture()" width="100">
</BODY>
</HTML>
Упражнения
1. Написать сценарий, который считывает вводимый с клавиатуры символ (событие onkeydown связать с однострочным текстовым полем) и в многострочном текстовом поле TEXTAREA отображает в новой строке его код.
2. Разработать сценарий, который позволяет в текстовое поле вводить только десятичные цифры; только восьмеричные; только шестнадцатеричные.
3. Написать сценарий, который при перемещении указателя мыши по странице каждый раз при переходе на новый элемент HTML отображал бы диалоговое окно с сообщением о том, какой элемент HTML только что был покинут.
4. Написать сценарий, отслеживающий, какая кнопка мыши была нажата и в области какого элемента HTML (название его тега) находился в этот момент указатель мыши.
Дата добавления: 2018-09-24; просмотров: 476;