Событие onclick

Событие onclick происходит при клике, например на кнопку, картинку или любой другой элемент. Например:

<input type="button" value="Кликните на меня!"
     onclick="alert('Событие onclick происходит при клике. Дизайн студия OX2')" />

Событие ondblclick

Событие ondblclick работает аналогично событию onclick, но нужен двойной клик, например:

<div style="width:200px;height:100px;background-color:black; color: white;" 
ondblclick="alert('Событие ondblclick происходит при двойном клике. Дизайн студия OX2')">
        Сделайте двойной клик на блок
    </div>

Событие onmouseover, onmouseout, onmousemove

Событие onmouseover происходит при наведении мышки на элемент. Событие onmouseout происходит когда мышку убираем с элемента. Это очень важно при создании красивых эффектов в сайте (например, графическое меню). Сейчас сделаем небольшой примерчик

<img src="/images/articles/forum.png" onmouseover="this.src='/images/articles/forum_s.png'" 
onmouseout="this.src='/images/articles/forum.png'" alt="" />

При наведении мыши на картинку меняем свойство src. И когда убираем мышку с картинки, возвращаем старую картинку.

Событие onmousemove происходит аналогично onmouseover, onmouseout, но в отличие от них, работает когда мышкой вводят по элементу.

События для клавиатуры

Событие onkeydown, onkeyup, onkeypress

Событие onkeydown происходит при нажатии клавиши, когда клавиша нажата. Событие onkeyup происходит так же при отпускании клавиши. Событие onkeypress происходит аналогично onkeydown, основное отличие только в том, что keypress не ловит клавиши F1-F12 и другие, ловит в основном только символьные клавиши.

Событие onkeydown

<input type="text" onkeydown="alert('Событие onkeydown. Дизайн студия OX2')" />

Событие onkeyup

<input type="text" onkeyup="alert('Событие onkeyup. Дизайн студия OX2')" />

Событие onkeypress

<input type="text" onkeypress="alert('Событие onkeypress. Дизайн студия OX2')" />

События при изменении состояния элементов

Событие onchange

Событие onchange происходит при изменении элементов формы. Например, в текстовом поле написали текст, или в списке select выбрали другой параметр.
Вот небольшой пример, при изменении текстового поля, показываем сообщение:

<input type="text" onchange="alert('Текст был изменен. Дизайн студия OX2')" />