Иерархия объектов браузера
-
Список событий, наиболее часто обрабатываемых сценариями 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> |