Учебник по 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 Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки 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/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

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

JS-классы

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

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

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

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

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS 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!'">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

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

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


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

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

Click Me


Дополнительные примеры


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


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


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


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


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

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