САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

JS Учебник

JS Главная JS Введение JS Установка JS Вывод JS Синтаксис JS Заявления JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS Область JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Формат даты JS Метод получения дат JS Методы набора... JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Отладчик JS Подъемный JS Строгий JS Ключевое слово this JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Доступ к объекту Конструкторы объекта Прототипы объекта Объект ECMAScript 5

JS Функции

Определение функции Параметры функции Вызов Функции Вызвать Функцию Применение функции Закрытие Функции

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель события DOM Навигация DOM Узлы DOM Коллекции DOM Список узлов

JS Браузера BOM

JS Окно JS Экран JS Местоположение JS История JS Навигатор JS Всплывающее окна JS Синхронизация JS Cookies

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Ответ AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS или jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввод


JavaScript HTML DOM - События



HTML DOM позволяет JavaScript реагировать на события HTML:

Мышь надо мной
Нажмите

Реагирование на события

JavaScript может быть выполнен, когда происходит событие, например, когда пользователь нажимает на элемент HTML.

Чтобы выполнить код, когда пользователь нажимает на элемент, добавьте код JavaScript в атрибут события HTML:

onclick=JavaScript

Примеры событий HTML:

  • Когда пользователь щелкает мышкой
  • Когда загружается веб страница
  • Когда изображение было загружено
  • Когда мышь перемещается по элементу
  • При изменении поля ввода
  • При отправке HTML формы
  • Когда пользователь нажимает клавишу

В этом примере содержимое элемента <h1> изменяется, когда пользователь нажимает на него:

Пример

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ооопс!'">Нажмите на этот текст!</h1>

</body>
</html>
Попробуйте сами »

В этом примере функция вызывается из обработчика событий:

Пример

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Нажмите на этот текст!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ооопс!";
}
</script>

</body>
</html>
Попробуйте сами »


Атрибуты событий HTML

Чтобы назначать события для элементов HTML, вы можете использовать атрибуты событий.

Пример

Назначить событие onclick элементу button:

<button onclick="displayDate()">Попробовать</button>
Попробуйте сами »

В приведенном выше примере функция с именем displayDate, будет выполняться при нажатии на кнопку.


Назначение событий с помощью HTML DOM

HTML DOM позволяет назначать события элементам HTML с помощью JavaScript:

Пример

Назначить событие onclick элементу button:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Попробуйте сами »

В приведенном выше примере функция с именем displayDate, назначается элементу HTML с id="myBtn".

Функция будет выполнена при нажатии на кнопку.


События onload и onunload

События onload и onunload запускаются, когда пользователь входит на страницу или покидает ее.

Событие onload можно использовать для проверки типа браузера посетителя и версии браузера, а также загрузки соответствующей версии веб страницы на основе полученной информации.

События onload и onunload можно использовать для работы с файлами cookie.

Пример

<body onload="checkCookies()">
Попробуйте сами »

Событие onchange

Событие onchange, часто используется в сочетании с проверкой полей ввода.

Ниже приведен пример, как использовать onchange. Функция upperCase() вызывается, когда пользователь изменяет содержимое поля ввода.

Пример

<input type="text" id="fname" onchange="upperCase()">
Попробуйте сами »

События onmouseover и onmouseout

События onmouseover и onmouseout, можно использовать для запуска функции при наведении курсора мыши на элемент HTML или его выходе из него:

Мышь надо мной

Попробуйте сами »


События onmousedown, onmouseup и onclick

События onmousedown, onmouseup, и onclick, являются частями щелчка мыши. Сначала при нажатии кнопки мыши запускается событие onmousedown, затем, когда кнопка мыши отпущена, запускается событие onmouseup, наконец, когда щелчок мыши завершен, запускается событие onclick.

Нажмите

Попробуйте сами »


Больше примеров

События onmousedown и onmouseup
Изменение изображения, когда пользователь удерживает нажатой кнопку мыши.

Событие onload
После завершения загрузки страницы отобразится окно предупреждения.

Событие onfocus
Измените цвет фона поля ввода, когда оно получает фокус.

События onmouseover и onmouseout
Изменение цвета элемента при наведении на него курсора.


Ссылка на объект события HTML DOM

Для получения списка всех событий HTML DOM, посмотрите на нашем полном HTML DOM Справочник объект события.