logo_s

САМОУЧКА

Сайт для тех, кто хочет научиться

 

 

 

 

 

 

Главная

О Нас

Публикации

Связь

 

 

 

 

 

 

 

Наши публикации

 

HTML для новичков

 

XHTML

 

CSS для новичков

 

CSS 3

 

JavaScript

 


< Предыдущая  Следующая >

Код событий в 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. Сделайте квадрат красным (подробности в редакторе):

Задание 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';
}


< Предыдущая  Следующая >

 

 

 

 

 

Последние добавления

 

HotLog