Код событий в JavaScript выполнится только после того, как произойдет их активирующее действие.

События

События - это функции, которые могут быть привязаны к элементам HTML страниц.

Код событий выполнится только после того, как произойдет их активирующее действие. Разные типы событий имеют разные активирующие действия.

Примеры активирующих действий JavaScript:

• Щелчок мыши (событие onclick);
• Нажатие клавиши (onkeypress);
• Отправление формы (onsubmit);
• Наведение курсора мыши на элемент (onmouseover) или выведение курсора мыши за пределы границ элемента (onmouseout);
• Полная загрузка страницы или картинки (onload);
• Изменение содержимого элемента, например содержимого текстового поля формы (onchange).

Событие onсlick

Код события onclick будет выполнен после того, как пользователь щелкнет на элемент, к которому привязано это событие.

function messageShow() {
   document.write('Вы нажали на кнопку!');
}

Событие onload

Код события onload будет выполнен при полной загрузке страницы.

function messageShow() {
   alert('Страница была загружена!');
}

События onmouseover и onmouseout

События onmouseover и onmouseout часто используются, чтобы создать "анимированные" кнопки.

Код события onmouseover будет выполнен, когда на элемент, к которому привязано событие, будет наведен курсор мыши.

Код события onmouseout будет выполнен при выведении курсора мыши за пределы элемента.

function textchange() {
   document.getElementById('mes').style.backgroundColor='green';
}
function textreturn() {
   document.getElementById('mes').style.color='white';
   document.getElementById('mes').style.backgroundColor='blue';
}

Обратите внимание: все существующие в JavaScript события с примерами использования Вы можете найти в нашем HTML DOM справочнике

Сделайте сами

Задание 1. Сделайте квадрат красным (подробности в редакторе):

function act1() {
document.getElementById('square').style.backgroundColor='blue';
}
//..............
function act6() {
if (document.getElementById('square').style.backgroundColor=='brown')
document.getElementById('square').style.backgroundColor='green';
}
function reset(){
document.getElementById('square').style.backgroundColor='black';
document.getElementById('square').style.color='white';
document.getElementById('square').innerHTML='&nbsp';
}