Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Событийная модель






Любое событие имеет свой " жизненный" цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий браузера. Цикл жизни любого типичного события 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>






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.