События DOM


Что такое события и обработчики событий?

Урок №6
События в DOM
События и обработчики событий в DOM.

События в DOM это процессы запускающие функции. Мы уже знакомы с событием onclick=" ", которое запускало пользовательскую функцию getChangeEl() (функции запускающиеся после события, называются обработчиками событий).

// getChangeEl() - обработчик события
function getChangeEl() {
 document.getElementById("changeEl").style.fontSize="25px";
}

// onclick=" " - событие
<input type="button" value="Кнопка" onclick="getChangeEl()" />

В этом уроке, мы познакомимся с другими событиями. Изучить все существующие события DOM, вы можете на странице Атрибуты событий, здесь мы рассмотрим лишь некоторые из них:

onclick=" " — событие возникает при щелчке левой кнопкой мыши (уже нам знаком),
ondblclick=" " — событие возникает при двойном щелчке левой кнопкой мыши,
onmouseover=" " — событие возникает при наведении курсора мыши,
onmouseout=" " — событие возникает при отведении курсора мыши.

Событие ondblclick=" "

Разместите в нашем скрипте вместо события onclick=" ", событие ondblclick=" ". Теперь чтобы функция запустилась, вам нужно нажать по кнопке два раза (а не один), результат работы скрипта:

Изменяем внешность элемента, нажав на кнопку два раза!

Событие onmouseover=" "

Разместите в нашем скрипте вместо события onclick=" ", событие onmouseover=" ". Теперь чтобы функция запустилась, вам нужно навести указатель мыши на кнопку, результат работы скрипта:

Изменяем внешность элемента, наведя курсор мыши на кнопку!

Событие onmouseout=" "

Разместите в нашем скрипте вместо события onclick=" ", событие onmouseout=" ". Теперь чтобы функция запустилась, вам нужно навести указатель мыши на кнопку и отвести её, результат работы скрипта:

Изменяем внешность элемента, отведя курсор мыши от кнопки!

Читать далее: Элемент как кнопка


Дата публикации поста: 5 февраля 2016
Дата обновления поста: 17 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *