Скачиваний:
22
Добавлен:
04.04.2013
Размер:
140.8 Кб
Скачать

Иерархия объектов браузера

  • Список событий, наиболее часто обрабатываемых сценариями JavaScript

onClick

событие происходит при однократном щелчке левой кнопки мышки на элементе

onDblClick

событие происходит при двойном щелчке левой кнопкой мышки на элементе

onMouseMove

событие наступает, когда пользователь перемещает курсор мыши над элементом страницы

onMouseOver

событие происходит при наведении курсора мыши на элемент

onMouseOut

событие происходит при перемещении курсора мышки за пределы элемента

onFocus

событие происходит при получении элементом фокуса с помощью мышки или последовательного перехода (клавиша Tab).

onBlur

событие приосходит при потере фокуса с элемента с помощью курсора мышки или последовательности перехода (клавиша Tab).

onChange

событие происходит при изменении значения элемента формы в момент потери им фокуса

onSubmit

событие происходит при отправке формы

onLoad

событие происходит, когда загрузка документа в окно или фрейм закончена

onUnload

событие происходит, когда пользователь закрывает документ

  • Каждый объект обладает набором свойств и методов

  • Самый простой способ получить доступ к текущему объекту – воспользоваться указателем this, являющемуся синонимом текущего объекта.

  • Пример. Надпись в окне меняет стиль при наведении курсора мыши и возвращает первоначальный стиль, когда курсор сдвигается за пределы надписи.

<html><head>

<style>

.st1 {color : Red;}

.st2 {color : Blue;}

</style></head>

<body>

<span class="st1"

onMouseOver="this.className='st2'"

onMouseOut="this.className='st1'">

Текст</span>

</body></html>

  • Доступ к объекту коллекции осуществляется по номеру или при помощи идентификатора.

  • Номера раздаются объектам одного типа по мере их описания в теле документа. Нумерация начинается с нуля.

  • Уникальный идентификатор задается при помощи параметра id

Пример. Содержимое ячейки таблицы изменяется при нажатии на цифру

<html><body>

<script>

function change(num) {

content=new Array(2);

content[0]='Один';

content[1]='Два';

document.all['cell'].innerText=content[num-1];

// cell.innerText=content[num-1];

}

</script>

<table border="1">

<tr><td id="cell">Ноль</td></tr>

</table>

<b onClick="change(1)">1</b><br>

<b onClick="change(2)">2</b>

</body></html>

  • Пример. При наведении курсора на изображение на его места загружается изображение из другого файла. После того, как курсор убран, загружается первоначальное изображение.

<html><body>

<script>

function change(param) {

if (param==0)

document.images[0].src="pic2.gif";

else document.images[0].src="pic1.gif";

}

</script>

<img src="pic1.gif"

onMouseOver="change(0)"

onMouseOut="change(1)">

</body></html>

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

Установочный файл

Файл frtest.html

<html>

<frameset cols="50%,*">

<frame name="fr1" src="frtest.html">

<frame name="fr2" src="frtest.html">

</frameset>

</html>

<html><body>

<script>

function change() {

window.parent.frames['fr1'].location='page1.html';

window.parent.frames['fr2'].location='page2.html';

}

</script>

<a href="javascript: change()">Ссылка</a>

</body></html>

Соседние файлы в папке 2_HTML