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

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 Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

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

JS Объекты

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

JS Функции

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

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

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

JS Браузера BOM

JS Window 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 Веб API

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

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML DOM

JS Примеры

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

JS Справочник

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


Реклама на Schoolsw3

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!'">Click on this text!</h1>

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

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

Пример

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

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

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


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

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

Пример

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

<button onclick="displayDate()">Try it</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.