Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

События 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=" ". Теперь чтобы функция запустилась, вам нужно навести указатель мыши на кнопку и отвести её, результат работы скрипта:

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

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

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 17 Окт 2014
Статья обновлена: 5 Фев 2016

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget