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

JS Учебник

JS Главная JS Введение JS Где установить? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Let JS Const JS Операторы JS Арифметика JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Поиск строк JS Шаблоны строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Постоянный массив JS Даты JS Формат дат JS Методы получения дат JS Методы набора дат JS Объекты Math JS Случайные числа JS Булевы JS Сравнения JS Оператор If...Else JS Оператор Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Оператор Break JS Повторяющиеся JS Наборы JS Карты JS Typeof JS Преобразование JS Битовые JS Выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Стрелки JS Классы JS JSON JS Отладчик JS Стиль JS Практика JS Ошибки JS Эффективность JS Слова

JS Версии

JS Версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/Edge JS История

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ объекта Конструкторы объекта Прототипы объекта Повторяющиеся объекты Набор объектов Карты объекта Справочник объектов

JS Функции

Определение функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS Классы

Введение класса Наследование класса Статистический класс

JS Асинхронный

JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный

JS HTML DOM

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

JS Браузер BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Куки

JS Веб APIы

Веб API Введение Веб API История Веб API Хранилище Веб API Работник Веб API Извлечь Веб API Геолокации

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 Элементы jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввод JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

JavaScript Объекты HTML DOM Объекты


JavaScript - HTML DOM События



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

Наведи мышь
Нажми на меня

Как реагировать на события

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

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

onclick=JavaScript

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

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

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

Пример

<!DOCTYPE html>
<html>
<body>

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

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

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

Пример

<!DOCTYPE html>
<html>
<body>

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

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

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


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

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

Пример

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

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

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


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

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

Пример

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

<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 and onmouseup
Изменяет изображение, когда пользователь удерживает кнопку мыши.

onload
Отобразить окно предупреждения, когда страница завершит загрузку.

onfocus
Изменить цвет фона поля ввода, когда оно находится в фокусе.

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


Справочник по объекту события HTML DOM

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