 ПОЗНАВАТЕЛЬНОЕ Сила воли ведет к действию, а позитивные действия формируют позитивное отношение Как определить диапазон голоса - ваш вокал Игровые автоматы с быстрым выводом Как самому избавиться от обидчивости Противоречивые взгляды на качества, присущие мужчинам Вкуснейший "Салат из свеклы с чесноком" Натюрморт и его изобразительные возможности Применение, как принимать мумие? Мумие для волос, лица, при переломах, при кровотечении и т.д. Как научиться брать на себя ответственность Зачем нужны границы в отношениях с детьми? Световозвращающие элементы на детской одежде Как победить свой возраст? Восемь уникальных способов, которые помогут достичь долголетия Классификация ожирения по ИМТ (ВОЗ) Глава 3. Завет мужчины с женщиной
Оси и плоскости тела человека - Тело человека состоит из определенных топографических частей и участков, в которых расположены органы, мышцы, сосуды, нервы и т.д.
| Предотвращение всплывания события. Свойство cancelBubble
Реакция на событие в отдельном элементе Так как в объектной модели объекты могут быть вложены друг в друга, то событие, происходящее в дочернем объекте, одновременно происходит и в родительском объекте. JavaScript предоставляет различные способы локализации влияния события на иерархию объектов. Простейшей способ локализации (пример 2.1) заключается в размещении сценария в теге, на который должно воздействовать событие. Пример 2.1.
Выполнить пример 2.1 Страница в примере 2.1 состоит из одной строки, заключённой в контейнер <P> …</p>. В объектной модели страницы событие, происходящее с объектом P, происходит также и с родительским объектом BODY. Чтобы локализовать реакцию на событие только пределами строки, то есть объекта P, сценарий реакции на события помещен в тег <P >. В результате исполнения сценария изменяется положение текста на строке. Первоначально строка прижата к правому краю окна. При попадании на неё курсора она выравнивается по центру, а после снятия курсора прижимается к левому краю окна. Для обращения к объекту используется коллекция all, которая правильно воспринимается браузерами Internet Explorer 6.0 и Mozilla Firefox 2.0 . Ключевое слово this означает ссылку на текущий объект. Если при наступлении события нужно произвести много действий, то удобно сценарий написать в виде функции и поместить её отдельно от элемента в специально предназначенный для сценариев контейнер <SCRIPT> …</script>. В примере 2.2 каждое из событийonMouseOver и onMouseOut вызывает два действия: выравнивание и изменение цвета текста в строке. Пример 2.2 <HTML> Выполнить пример 2.2 Задача 2.1. Напишите HTML-документ, отображающийся в окне браузера в виде следующих четырёх строк:
Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:
Повторный щелчок мышкой возвращает вторую строку к первоначальному виду. Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым. При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым. Фиксация события в родительском элементе Если реакцию на какое-либо событие требуют несколько элементов, расположенных на странице, то можно вызвать функцию для обработки этого события только в родительском элементе. В функции определяется, на каком элементе произошло событие, и выполняются соответствующие действия. Удобство такого подхода состоит в том, что весь алгоритм преобразований находится в одном месте, а недостаток – в сложности самой функции. Рассмотрим сценарий (пример 2.3), в котором для изменения свойств любого из трёх объектов, находящихся в окне браузера служит одна функция. Пример 2.3
//Изменение цвета внешнего прямоугольника case "k2": //Изменение цвета внутреннего прямоугольника case "B": //Изменение цвета заднего плана документа Выполнить пример 2.3 В примере 2.3 родительским по отношению к элементу H1 и двум элементам DIV является элемент BODY. Поэтому в теге <BODY> вызывается функция rodEl(), служащая для обработки события onclick. В момент наступления события вся информация о нём запоминается в объекте event, дочернем по отношению к объекту window. В примере используется свойство srcElement, хранящее в качестве значения объект на котором произошло событие. Поэтому выражениеsrcElement.Id читается так: Id объекта, на котором произошло событие. К сожалению, свойство srcElement имеется только в объектной модели, поддерживаемой браузером Internet Explorer, поэтому сценарий данного примера в других браузерах работать не будет. В сценарии сначала определяется Id элемента, по которому пользователь щёлкнул мышкой, а затем с помощью оператора Switch делается переход к изменению свойств указанного элемента. Цвет слова ЦВЕТ и фона документа меняется только один раз, а цвет прямоугольников – при каждом щелчке по ним мышкой. В примере 2.3 для того, чтобы хорошо была видна структура документа, громоздкие описания параметров вынесены в CSS. Задача 2.2. Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта. Предотвращение всплывания события. Свойство cancelBubble В примере 2.3 рассматривалась простая страница с небольшим количеством элементов, но даже в таком простом случае функция реакции на событие получилась сложной. Проще для каждого элемента написать свою функцию обработки события, а распространение события вверх по дереву иерархической структуры от "детей" к "родителям" (в этом случае говорят о всплывании события) блокировать с помощь специально для этого предназначенного свойства cancelBubble объекта event. Изменим пример 2.3 так, чтобы для реакции на щелчок по каждому из четырёх элементов страницы служила своя функция: Пример 2.4 HTML> z=document.all.B.bgColor } z= document.all.k1.style.backgroundColor } z=document.all.k2.style.backgroundColor } z=document.all.HH.style.colorif(z!="#aa00aa"){z="#aa00aa"} } Выполнить пример 2.4 Для лучшего проявления эффекта всплывания событий в пример 2.4 добавлено изменение фона всего документа и цвета надписи при каждом щелчке мышкой по ним. Скопируйте в свой каталог и просмотрите пример 2.4 в браузере Internet Explorer. Щёлкните по словуЦВЕТ. Изменится не только цвет слова, но и цвет фона документа, так как после щелчка сначала выполнится функция H_1(), а затем событие всплывёт к родительскому элементу BODY и выполнится функция rodE1(). При щелчке по внутреннему прямоугольнику будут меняться цвета обоих прямоугольников и фона документа. Щелчок по внешнему прямоугольнику изменит цвет этого прямоугольника и цвет фона документа. Задача 2.3. Чтобы предотвратить всплывание события в примере 2.4, вставьте в начало всех функций, кроме первой, оператор window.event.cancelBubble=true
|
