ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

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 Массив Const JS Даты JS Форматы дат JS Методы получения дат JS Методы установки дат JS Математические JS Рандомные JS Булевы JS Сравнения JS Условия JS Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Break и Continue JS Итерации JS Наборы JS Карты JS Typeof JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Хостинг JS Use Strict 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 Асинхронный

Обратные вызовы Асинхронный Промисы Async/Await

JS HTML DOM

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

JS Браузер BOM

JS Окно JS Скрин JS Локация JS История JS Навигатор JS Всплывающее оповещение JS Тайминг JS Куки

JS Веб API

Веб 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 Stringify 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 Input JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочники

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

JavaScript. W3Schools на русском. Уроки для начинающих

JavaScript События


HTML события - это "что-то", что происходит с HTML элементами.

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


HTML События

HTML-событие может быть тем, что делает браузер, или тем, что делает пользователь.

Вот несколько примеров HTML событий:

  • HTML-страница закончила загрузку
  • Поле ввода HTML было изменено
  • Нажата кнопка HTML

Часто, когда происходят события, вы можете захотеть что-то сделать.

JavaScript позволяет выполнять код при обнаружении событий.

HTML позволяет добавлять атрибуты обработчика событий с кодом JavaScript к HTML єлементам.

С одинарными кавычками:

<элемент event='какой-то JavaScript'>

С двойными кавычками:

<элемент event="какой-то JavaScript">

В следующем примере атрибут onclick (с кодом) добавляется к элементу <button>:

Пример

<button onclick="document.getElementById('demo').innerHTML = Date()">Который час?</button>
Попробуйте сами »

В приведенном выше примере JavaScript код изменяет содержимое элемента с id="demo".

В следующем примере код изменяет содержимое своего собственного элемента (используя this.innerHTML):

Пример

<button onclick="this.innerHTML = Date()">Который час?</button>
Попробуйте сами »

JavaScript код часто состоит из нескольких строк. Чаще встречаются атрибуты событий, вызывающие функции:

Пример

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

Общие HTML события

Вот список некоторых распространённых HTML событий:

Событие Описание
onchange HTML-элемент был изменен
onclick Пользователь кликает HTML элемент
onmouseover Пользователь наводит указатель мыши на HTML элемент
onmouseout Пользователь отодвигает мышь от HTML элемента
onkeydown Пользователь нажимает клавишу клавиатуры
onload Браузер завершил загрузку страницы

Список более длинный: W3Schools Справочник по JavaScript HTML DOM События.


Что может сделать JavaScript?

Обработчики событий можно использовать для обработки и проверки ввода пользователя, действий пользователя и действий браузера:

  • Что нужно делать каждый раз, когда загружается страница
  • Что нужно сделать, когда страница закрыта
  • Действие, которое должно быть выполнено, когда пользователь нажимает кнопку
  • Контент, который следует проверять, когда пользователь вводит данные
  • И другое ...

Можно использовать много разных методов, чтобы JavaScript мог работать с событиями:

  • Атрибуты событий HTML могут выполнять код JavaScript напрямую
  • Атрибуты событий HTML могут вызывать функции JavaScript
  • Вы можете назначить свои собственные функции обработчика событий элементам HTML
  • Вы можете запретить отправку или обработку событий
  • И другое ...

Вы узнаете намного больше о событиях и обработчиках событий в главах HTML DOM на нашем сайте W3Schools на русском.


Проверьте себя с помощью упражнений

Упражнение:

Элемент <button> должен что-то делать, когда кто-то нажимает на него. Попробуйте это исправить!

<button ='alert('Hello')'>Click me.</button>