JavaScript События
Цель работы – научиться использовать имеющиеся в модели документа события для внесения изменений в страницу.
Наиболее часто в сценариях используется рассмотренное выше событие onclick. Для того чтобы обратить внимание пользователя на определённый элемент HTML-документа, можно менять свойства этого элемент при попадании на него курсора мышки, а при снятии курсора восстанавливать прежние значения свойств. Например, можно менять цвет или размер элемента. Попадание курсора мышки на элемент фиксируется событием onMouseOver. Парное для него событие onMouseOut происходит при снятии курсора мышки с элемента.
Другая пара событий onMouseDown и OnMouseUp происходит при нажатии и отпускании левой кнопки мышки. Эту пару событий удобно применять для изменения свойств элементов или замены элементов на время удержания кнопки мышки нажатой.
Реакция на событие в отдельном элементе
Так как в объектной модели объекты могут быть вложены друг в друга, то событие, происходящее в дочернем объекте, одновременно происходит и в родительском объекте. JavaScript предоставляет различные способы локализации влияния события на иерархию объектов. Простейшей способ локализации (пример 2.1) заключается в размещении сценария в теге, на который должно воздействовать событие.
Пример 2.1.
<HTML> <BODY> <P align=right ID='alfa' onMouseOver="document.all.alfa.align='center' "onMouseOut="this.align='left'"> События onMouseOver и onMouseOut </p> </body> </html>
Страница в примере 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>
<P
align=right ID='alfa' onMouseOver="M_Over()"
onMouseOut="M_Out()">
Событие
onMouseOver</p>
<SCRIPT>
function M_Over()
{
document.all.alfa.align='center'
document.all.alfa.style.color='FF00FF'
}
function M_Out()
{
document.all.alfa.align='left'
document.all.alfa.style.color='0000FF'
}
</script>
</html>
Задача 2.1. Напишите HTML-документ, отображающийся в окне браузера в виде следующих четырёх строк:
- Пять событий с мышкой
- Щёлкните по мне мышкой
- На этом тексте нажмите, подержите и отпустите левую кнопку мышки
- Медленно проведите курсором мышки по этой надписи
Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:
- шрифт увеличивается до 48pt;
- цвет шрифта меняется на белый;
- цвет фона меняется на голубой.
Повторный щелчок мышкой возвращает вторую строку к первоначальному виду.
Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым.
При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым.
Фиксация события в родительском элементе
Если реакцию на какое-либо событие требуют несколько элементов, расположенных на странице, то можно вызвать функцию для обработки этого события только в родительском элементе. В функции определяется, на каком элементе произошло событие, и выполняются соответствующие действия. Удобство такого подхода состоит в том, что весь алгоритм преобразований находится в одном месте, а недостаток – в сложности самой функции. Рассмотрим сценарий (пример 2.3), в котором для изменения свойств любого из трёх объектов, находящихся в окне браузера служит одна функция.
Пример 2.3
<HTML><HEAD><TITLE>Реакция на событие</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE>H1 {color:FF00FF}
#k1{position:absolute; left:50;top:200;width:300; height:100;background-color:blue}
#k2{position:relative; left:50;top:25; width:200; height:50;background-color:yellow}
</STYLE>
</HEAD>
<BODY ID="B" onclick="rodEl(event)">
<H1 ID="HH" >ЦВЕТ </H1>
<DIV ID="k1" >
<DIV ID="k2" ></div>
</div>
<SCRIPT>
/* Функция запускается при щелчке мышкой по любой точке документа */
flag=0;
function rodEl(evt)
{ var e = evt || window.event; //e -это объект event
var elem = e.target || e.srcElement; //elem - элемент (объект),
// на котором произошло событие
id1=elem.id
z1=document.getElementById(id1)
switch(id1)
{ case "k1": //Изменение цвета внешнего прямоугольника
z=z1.style.backgroundColor
if(z!="red")z="red"
else z="green"
z1.style.backgroundColor=z
break
case "k2": //Изменение цвета внутреннего прямоугольника
z=z1.style.backgroundColor
if(z!='rgb(0, 255, 255)'){z='rgb(0, 255, 255)'}
else{z='rgb(0, 255, 0)'}
z1.style.backgroundColor=z
break
case "B": //Изменение цвета заднего плана документа
z=z1.style.backgroundColor
if(z!='rgb(190, 190, 190)'){z='rgb(190, 190, 190)'}
else {z='rgb(0, 190, 190)'}
z1.style.backgroundColor=z
break
case "HH": //Изменение цвета слова "Цвет"
if(flag==0)
{ document.getElementById(id1).style.color='rgb(170,0,170)';
flag=1;
}
else
{ document.getElementById(id1).style.color='rgb(0,255,170)';
flag=0;
}
}
}
</SCRIPT>
</BODY>
</HTML>
В примере 2.3 родительским по отношению к элементу H1 и двум элементам DIV является элемент BODY. Поэтому в теге <BODY> вызывается функция rodEl(), служащая для обработки события onclick.
В момент наступления события вся информация о нём запоминается в объекте event. Этот объект по разному описывается в стандарте W3C и в браузере Internet Explorer. Новые версии Internet Explorer поддерживают и стандарт W3C.
В стандарте W3C объект event передаётся в функцию в качестве параметра, а для обращения к объекту, на котором произошло событие, служит свойство event.target.
В Internet Explorer объект window.event - глобальный и поэтому передавать его в функцию в виде параметра не нужно. Для обращения к объекту, на котором произошло событие, в Internet Explorer служит свойство window.event.srcElement
В примере 2.3 первые две строчки тела функции rodEl()служат для кроссплатформенного (в любом браузере) обращения к объекту, на котором произошло событие.
В в следующих строках функции rodEl() сначала определяется Id элемента, по которому пользователь щёлкнул мышкой, а затем с помощью оператора Switch делается переход к изменению свойств указанного элемента.
Задача 2.2. Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта.
Предотвращение всплывания события. Свойство cancelBubble
В примере 2.3 рассматривалась простая страница с небольшим количеством элементов, но даже в таком простом случае функция реакции на событие получилась сложной. Проще для каждого элемента написать свою функцию обработки события, а распространение события вверх по дереву иерархической структуры от "детей" к "родителям" (в этом случае говорят о всплывании события) блокировать с помощь специально для этого предназначенного свойства cancelBubble объекта event. Изменим пример 2.3 так, чтобы для реакции на щелчок по каждому из четырёх элементов страницы служила своя функция:
Пример 2.4
<HTML><HEAD><TITLE>Реакция на событие</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE>H1 {color:#ff00ff}
#k1{position:absolute; left:50;top:200;
width:300; height:100;background-color:blue}
#k2{position:relative; left:50;top:25;
width:200; height:50;background-color:yellow}
</STYLE></HEAD>
<BODY ID="B" bgcolor="AAAAAA" onclick="rodEl()" style="height:600px">
<H1 ID="HH" onclick="H_l()">ЦВЕТ</H1>
<DIV ID="k1" onclick="D_l()">
<DIV ID="k2" style="background-color:yellow" onclick="D_2(this)"></div>
</div>
</BODY>
<SCRIPT>
/* Функция запускается при щелчке мышкой по
любой точке документа */
function rodEl()
{ //Изменение цвета заднего плана документа
var z=document.all.B.bgColor
if(z!="#777777"){z="#777777"}
else{z="AAAAAA"}
document.all.B.bgColor =z
}
function D_l()
{ //Изменение цвета внешнего прямоугольника
var z=document.all.k1.style.backgroundColor
if(z!="red") z="red"
else z="green"
document.all.k1.style.backgroundColor=z
}
/*function D_2()
{ //Изменение цвета внутреннего прямоугольника
var z=document.all.k2.style.backgroundColor
if(z=="#ff00ff" || z=='rgb(255, 0, 255)'){z="#00ffff"}
else{z="ff00ff"}
document.all.k2.style.backgroundColor=z
}*/
function D_2(thi)
{ //Изменение цвета внутреннего прямоугольника
var z=thi.style.backgroundColor
if(z=="#ff00ff" || z=='rgb(255, 0, 255)'){z="#00ffff"}
else{z="ff00ff"}
thi.style.backgroundColor=z
}
function H_l()
{ //Изменение цвета слова "Цвет"
var z=document.all.HH.style.color
//alert("1. z="+document.all.HH.style.color)
if(z=="#aa00aa" || z=='rgb(170, 0, 170)')
{ z="#00ffff"
//alert("2. z="+z)
}
else{z="#aa00aa"}
document.all.HH.style.color=z
}
</SCRIPT></HTML>
Скопируйте в свой каталог и просмотрите пример 2.4 в браузере Internet Explorer. Щёлкните по слову ЦВЕТ. Изменится не только цвет слова, но и цвет фона документа, так как после щелчка сначала выполнится функция H_1(), а затем событие всплывёт к родительскому элементу BODY и выполнится функция rodE1(). При щелчке по внутреннему прямоугольнику будут меняться цвета обоих прямоугольников и фона документа. Щелчок по внешнему прямоугольнику изменит цвет этого прямоугольника и цвет фона документа.
Задача 2.3. Чтобы предотвратить всплывание события в примере 2.4, вставьте в начало всех функций, кроме первой, оператор
window.event.cancelBubble=true