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

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 Switch JS Цикл For JS Цикл While JS Прерывание JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Подъём JS Строгий режим JS Ключевое слово this JS Ключевое слово Let JS Ключевое слово Const JS Функции стрелок JS Классы JS Отладка JS Гид по стилю JS Лучшие практики JS Ошибки JS Производительность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

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 Куки

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 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 Справочники

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

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

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.


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

Упражнение:

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

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

Начать упражнение