Обработка событий онлайн урок.


События веб-документа - это некоторые процессы, которые происходят на веб-странице. События условно можно разделить на 2 категории: пользовательские и браузерные. К браузерным событиям можно отнести следующие:

  • Загрузка документа
  • Загрузка элемента DOM
  • Неудачная загрузка документа
  • Неудачная загрузка элемента DOM
  • и прочие подобные

Т.е. это такие события, которые не являются результатом действий пользователя.

К пользовательским событиям можно отнести все остальные, например:

  • Изменение размера окна
  • Скроллинг
  • Клик
  • Наведение курсора мыши
  • Нажатие клавиши
  • Ввод данных в поле формы
  • Закрытие вкладки

При помощи JS можно реагировать на эти события, т.е. создавать скрипты-обработчики событий.

Код JS может быть добавлен в качестве значения атрибута некоторого события, то есть

<тег событие = "код JS">


Это будет означать, что событие имеет отношение к тому тегу, в котором написан атрибут события. Рассмотрим основные события веб-документа:
  • onclick- клик левой кнопки мыши
  • ondblclick- двойное нажатие левой кнопки мыши
  • onchange- изменение значения в поле элемента формы
  • onfocus- событие фокусировки на элементе формы. Это событие означает переход элемента формы в состояние, готовое к вводу данных в него
  • onblur- событие противоположное onfocusonsubmit- событие нажатия кнопки отправки формы
  • onload- загрузка веб-страницы в окно браузера, событие веб-страницы

Рассмотрим простые примеры:

<!DOCTYPE html>
<html>

<head>
<title>JS events</title>
</head>

<body onload="console.log('loaded');">
<div ondblclick="alert('You double clicked on p tag');">
DbClick me!
</div>
<p onclick="alert('You clicked on p tag');">
Click me!
</p>
</body>

</html>


После загрузки страницы в консоль будет выведена строка "loaded", а при кликах на блочные элементы будут всплывать модальные окна с соответствующими сообщениями.

Как правило для обработки событий удобно создать отдельную функцию и поместить ее в значение атрибута одноименного события, чтобы не писать в нем большое количество строк кода. Если у атрибута значения стоит директива return, это дает возможность повлиять на само исполнение этого события, например если атрибут события формы onsubmit содержит return false, то отправка формы будет отклоняться.

Рассмотрим пример с использованием формы:



При попытке отправить форму будет выводиться модальное окно с просьбой о подтверждении, а соответствующая функция будет возвращать значения true или false - таким образом контролируя отправку формы.