События в HTML. Как установить обработчики ивентов окна, клавиатуры и мыши?

события в html. как установить обработчики ивентов окна, клавиатуры и мыши?

Установка обработчиков событий

В прошлых уроках было рассмотрено подключение скриптов в HTML. Они позволяют изменять страницу после её загрузки. Такие скрипты называются клиентскими, так как выполняются в браузере на стороне пользователя. Самым распространенным языком программирования клиентских сценариев является JavaScript, который поддерживается всеми возможными браузерами.

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

Связь события и обработчика создается двумя способами:

  • Использование специальных атрибутов HTML-элементов позволяет указать, какое событие должно отслеживаться, и какому сценарию делегировать его обработку.
  • Скрипт может самостоятельно установить прослушку событий на определенных элементах. При этом не нужно использовать никаких специальных атрибутов.

Названия таких атрибутов начинаются с приставки «on», после которой указывается имя события. Значение должно содержать выражение на языке JavaScript. Обычно это вызов функции. Полную запись атрибута можно составить как «oneventname=“functionName()“».

Ниже приводится пример разметки с двумя кнопками. Одна из них имеет атрибут события клика мыши, который вызывает функцию addItem(). Вторая кнопка отслеживает аналогичное событие, но вызывает функцию clearItems(). Обе функции прописаны в элементе <script> и отвечают за добавление элементов в список и его очистку.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример обработки пользовательских событий</title>

        <script>
            //Функция добавления нового элемента в список
            function addItem () {
                var text = document.getElementById('item-text');
                var list = document.getElementById('container');
                var value = text.value.trim();
                text.value = '';

                if (value !== '') {
                    var item = document.createElement('li');
                    item.innerHTML = value;
                    list.appendChild(item);
                }
            }

            //Функция полной очистки списка элементов
            function clearItems () {
                document.getElementById('container').innerHTML = '';
            }
        </script>
    </head>

    <body>
        <!-- Кнопки с установленными обработчиками событий и поле ввода -->
        <input onclick="addItem()" type="button" value="Добавить">
        <input onclick="clearItems()" type="button" value="Очистить">
        <input id="item-text" type="text" placeholder="название элемента">

        <!-- Контейнер списка элементов -->
        <h3>Список элементов:</h3>
        <ul id="container"></ul>
    </body>
</html>
Пример использования атрибутов событий в HTML-разметке
Рис 1. Пример изменения разметки по событию мыши

Заметка
В современной веб-разработке использовать атрибуты событий не желательно. Опыт показывает, что лучшим подходом является разделение всех компонентов страницы: разметка, стили, скрипты. Поэтому установку обработчиков событий нужно возлагать на программную логику скрипта.

Атрибуты событий окна браузера

В HTML часть событий связана с окном браузера. Для их отслеживания специальные атрибуты должны быть добавлены к элементу <body>.

Имя атрибута Причина возникновения события
onload Произошла полная загрузка всего содержимого страницы.
onbeforeunload Возникает перед закрытием текущей страницы.
onafterprint После распечатки документа на принтере.
onbeforeprint До распечатки документа на принтере.
onoffline Браузер потерял соединение с интернетом.
ononline Браузер восстановил соединение с интернетом.
onpagehide Пользователь покидает текущую страницу, переместившись по истории брузера. Для этого используются кнопки вперед и назад.
onpageshow Пользователь открывает страницу, переместившись по истории брузера. Для этого используются кнопки вперед и назад.
onresize Событие изменения размера окна браузера.
onblur Сокрытие текущей страницы при перемещении в другую вкладку браузера или окно другой программы.
onfocus Показ текущей страницы при перемещении из другой вкладки или окна другой программы.
onerror Во время загрузки документа или выполнения скрипта произошла ошибка.

Атрибуты событий мыши

Данный вид событий применяется ко всем элементам, присутствующим в HTML. Помимо стандартных событий мыши (скроллинг, клик, движение курсора) есть и специфичные, не рассматриваемые в этом уроке. Они плотно связаны с продвинутыми техниками написания клиентских скриптов, что не является темой нашего учебного курса.

Имя атрибута Причина возникновения события
onclick Одиночный клик левой кнопки мыши на элементе.
ondblclick Двойной клик левой кнопкой мыши на элементе.
onmousedown Кнопка мыши приняла нажатое положение. Основное отличие от onclick в том, что данное событие генерируется, если кнопка зажата, но еще не отпущена.
onmouseup Кнопка мыши выходит из нажатого положения.
onmousewheel Нажатие колесика мыши как средней кнопки.
onscroll Прокручивание с помощью колесика мыши.
onmouseover Курсор мыши вошел в область занимаемую элементом.
onmouseout Курсор мыши покинул область занимаемую элементом.
onmousemove Движение курсора по области, занимаемой элементом. С этим событием нужно быть осторожным. Оно генерируется множество раз, пока происходит перемещение. Скрипт может не успевать обрабатывать столько сигналов.
oncontextmenu Вызов контекстного меню при нажатии правой кнопкой мыши.

Атрибуты событий клавиатуры и фокуса ввода

Управление фокусом ввода было рассмотрено в предыдущих уроках. Если вы не знакомы с этой темой, мы советуем изучить представленную по ссылке информацию. Атрибуты событий фокуса ввода и клавиатуры могут быть применены к любому элементу, но, как правило, используются только для форм и их полей.

Имя атрибута Причина возникновения события
onfocus На элементе установлен фокус ввода.
onblur Элемент потерял фокус ввода.
oninput Содержимое поля формы было изменено. При вводе текста с клавиатуры генерируется для каждого добавляемого символа.
onchange Содержимое поля формы было изменено и потеряло фокус ввода. Отличие от oniput в том, что событие вызывается всего один раз.
onforminput Принцип действия аналогичен oninput, но вызывается при изменении любого поля, присутствующего в форме. Атрибут логичнее всего задавать для элемента <form>.
onformchange Принцип действия аналогичен onchange, но вызывается при изменении любого поля, присутствующего в форме. Атрибут логичнее всего задавать для элемента <form>.
onselect Выделение содержимого текстовых полей.
onsubmit Осуществлена попытка отправки формы.
oninvalid Содержимое поля формы не прошли валидацию.
onkeydown

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

onkeyup Возврат клавиши клавиатуры из нажатого состояния.
onkeypress Событие схоже с onkeydown, но вызывается только для клавиш символьного ввода. Если нажать управляющие клавиши, такие как Ctrl, событие не произойдет.

Последние публикации