Динамические стили DHTML (Dynamic hypertext markup language)

onClick
Событие onClick возникает при одиночном щелчке левой кнопкой мыши.
В следующем примере при щелчке по тексту меняется цвет текста.

<p onClick="this.style.color='red'">Пример использования события onClick.</p>

ondblClick
Событие ondblClick возникает при двойном щелчке левой кнопкой мыши.
В следующем примере при двойном щелчке по тексту меняется цвет текста.

onLoad Событие onLoad происходит при полной загрузки страницы документа или всех фреймов. Может использовать внутри тегов <BODY> и <FRAMESET>.
В следующем примере при загрузке страницы появляется сообщение 'Страница загружена!'.
Для того, чтобы опробовать этот пример добавьте на вашей страничке в содержимое тега BODY свойство onLoad
<BODY onLoad="javascript:window.alert('Страница загружена!')">

onUnLoad
Событие onUnLoad происходит при удалении страницы из окна или фрейма. Может использовать внутри тегов <BODY> и <FRAMESET>.
В следующем примере при уходе со страницы появляется сообщение 'Спасибо, что нас посетили!'.
Для того, чтобы опробовать этот пример добавьте на вашей страничке в содержимое тега BODY свойство onUnLoad, откройте эту страницу и перейдите на любую другую страницу:

<BODY onUnLoad="javascript:window.alert('Спасибо, что нас посетили!')">

onMouseDown
Событие onMouseDown возникает при нажатии левой кнопкой мыши.
В следующем примере нажатии кнопки мыши на тексте меняется стиль текста.

<p onMouseDown="this.style.fontWeight='bold'">Пример использования события onMouseDown.</p>

onMouseUp
Событие onMouseUp возникает при отпускании нажатой левой кнопки мыши.
В следующем примере нажатии кнопки мыши на тексте меняется стиль текста, а при отпускании стиль становится первоначальным.

<p onMouseDown="this.style.fontWeight='bold'" onMouseUp="this.style.fontWeight='normal'">Пример использования события onMouseDown и onMouseUp.</p>

onMouseOver
Событие onMouseOver возникает при наведении курсора мыши на элемент.
В следующем примере на наведении курсора мыши на текст появляется рамка.

<div onMouseOver="this.style.borderWidth='1';this.style.borderStyle='dotted'">Пример использования события onMouseOver.</div>

onMouseMove
Событие onMouseMove возникает при наведении курсора мыши на элемент.
В следующем примере на наведении курсора мыши на текст изменится цвет текста.

<font onMouseMove="this.style.color='red'" onMouseOver="this.style.color='blue'">Пример использования события onMouseMove.</font>

событие onMouseOver срабатывает только один раз, когда курсор мыши достигает объекта, а событие onMouseMove срабатывает постоянно, при движении курсора мыши над объектом.

onMouseOut
Событие onMouseOut возникает при перемещения указателя мыши за границы объекта.
Следующий пример демонстрирует последовательность событий onMouseOver, onMouseMove и onMouseOut. Каждое из этих событий меняет цвет текста:

<font onMouseOver="this.style.color='blue'" onMouseMove="this.style.color='red'" onMouseOut="this.style.color='green'">Пример использования события onMouseOut.</font>
При движении указателя мыши через объект "font" сначала происходит событие onMouseOver - текст становится синим (blue), затем событие onMouseMove - текст окрашивается в красный (red), и при уходе за границы объекта происходит событие onMouseOut - текст становится зеленым (green).

onFocus
Событие onFocus возникает при получении объектом фокуса при переходе по клику мыши или с помощью клавиатуры. Это событие может быть описано для тегов LABEL, INPUT, SELECT, TEXTAREA и BUTTON.
В следующем примере при клике на поле ввода текста, поясняющий текст исчезает (этот способ удобен для создания компактных и понятных форм, подсказка находится в самом поле и исчезает, при вводе в это поле информации):

<INPUT value="Введите ваше имя" onFocus="this.value=''">

onBlur
Событие onBlur возникает при потере объектом фокуса при переходе по клику мыши или с помощью клавиатуры. Это событие может быть описано для тегов LABEL, INPUT, SELECT, TEXTAREA и BUTTON.
В следующем примере при клике на поле ввода текста, поясняющий текст исчезает (событие onFocus) и при переходе фокуса, если пользователь ничего не ввел, подсказка появляется снова (событие onBlur):

архив javascript + CSS :: • до 2005 • 2006 • 2007 • 2008 • 2009 • 2010 • 2011