Разработка методики преподавания факультатива по программированию на языке JavaScript

Рефераты / Педагогика / Разработка методики преподавания факультатива по программированию на языке JavaScript

<элемент_страницы событие="функция|выражение">

Пример:

window.onload = mouve;

Данные строки кода выполняют одно и то же действие: вызывают функцию mouve при окончании загрузки страницы.

Для каждого объекта объектной модели браузера и документа происходят свои события (Приложение VI).

Порядок событий onmouse

Зд

есь представлена последовательность выполнения событий.

События мыши, для которых не требуется щелчок любой кнопки мыши, происходят в следующем порядке:

onmouseover.

оnmousemove.

onmouseout.

Cобытия мыши, связанные с нажатием кнопки мыши, происходят в следующем порядке:

onmousedown.

onmouseup.

onclick.

ondblclick.

Объект event

Объект event содержит информацию о том, какое событие произошло, какой элемент должен на него реагировать. Например, вместе с событием onclick передаются координаты курсора мыши и номер кнопки, нажатой пользователем. Для того, чтобы сценарий смог получить доступ к этим данным, предусмотрен объект event. Объект event имеет набор свойств (Приложение VI).

Прохождение событий

При выполнении определенного действия, вызванное им событие передается для обработки элементу, над которым совершили действие, а затем его родителю. И каждый объект может по-своему обработать это событие. Другими словами: каждое событие передается вверх по объектной иерархии.

Рассмотрим пример:

<html>

<head>

<title>События 2</title>

<style>

#obj {background-color:gray;

left:20; top:20; position: absolute;

width:200; height:100;}

#pic {left:30; top:30; position:absolute}

</style>

function picClick() {

window.alert("Рисунок!!!");

}

function objClick() {

window.alert("Элемент страницы!!!");

}

function pageClick() {

window.alert("Страница!!!");

}

</script>

</head>

</div>

</body>

</html>

Здесь при щелчке на белом фоне появляется одно окно предупреждения для тела документа; при щелчке на сером фоне - два: для тела документа и для элемента страницы; при щелчке на рисунке последовательно появляются три предупреждения: для рисунка, элемента страницы и тела документа. Это происходит как раз из-за того, что событие, которое вызвал щелчок на рисунке, передалось сначала элементу страницы а затем и телу документа, которые так же обработали его и вывели результат.

Для того, чтобы избежать передачи событий по иерархии нужно присвоить свойству cancelBubble объекта event значение true. Чтобы осуществить подобное в вышеприведенном примере, необходимо изменить сценарий следующим образом:

function picClick(){

window.alert("Рисунок!!!");

window.event.cancelBubble=true;

} function objClick(){

window.alert("Элемент страницы!!!");

window.event.cancelBubble=true;

}

function pageClick(){

window.alert("Страница!!!");

window.event.cancelBubble=true;

}

</script>

Пример:

Здесь представлен пример реализации движения элемента за курсором мыши.

<html>

<head>

var timeID, x, y, ix, iy;

function coord(){

x=window.event.clientX;

y=window.event.clientY;

}

function imMove(){

if(x>=ix){

if(x-ix>4)

ix+=4;

else

ix=x;

}

else{

if(ix-x>4)

ix-=4;

else

ix=x;}

if(y>=iy){

if(y-iy>4)

iy+=4;

else

iy=y;

}

else{

if(iy-y>4)

iy-=4;

else

iy=y;}

im.style.pixelLeft=ix-im.style.pixelWidth;

im.style.pixelTop=iy;

}

function setUp(){

timeID=window.setInterval("imMove()", 50);

}

</script>

</head>

<div >

Страница: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Разработка методики преподавания факультатива по программированию на языке JavaScript

Другие рефераты на тему «Педагогика»:

Поиск рефератов

Последние рефераты раздела