базовый курс

ГРУППА КУРСА

Обработка событий в JavaScript

Что такое событие браузера

Во время работы со страницей пользователь совершает различные действия: нажимает кнопки мыши, вводит текст на клавиатуре. Каждое такое действие - это событие браузера. Его можно отследить и выполнить определённые строки программы при их возникновении. Для этого в JavaScript есть обработчики событий. Кроме действий пользователя, существуют и другие события браузера, например полная загрузка страницы.

Каждое событие имеет своё название. click - это нажатие левой кнопки мыши, keydown - нажатие клавиши, focus - появление в фокусе элемента формы, DOMContentLoaded - загрузка страницы.

Обработка события

Функция, которая выполняется при срабатывании события называется обработчик события. Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick. События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик - это не отдельная функция. Обработчик ставится на какой-то элемент страницы.

Есть разные способы назначить элементу обработчик события. Можно назначить обработчик через атрибут тэга. Код, который должен выполниться при срабатывании события, пишется в значении атрибута. Создадим страницу, добавим на неё кнопку и назначим ей обработчик события click:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
<button onclick="alert('Нажата кнопка')">Кнопка</button>

Запустите страницу, нажмите на кнопку, и выполнится код, записанный в значении атрибута.

Обработчики событий являются свойствами DOM-объектов. Поэтому функцию, которая должна выполниться при срабатывании события можно просто написать в свойстве элемента. Имя свойства совпадает с именем обработчика. Это самый распространённый способ установки обработчика. Добавим на страницу ещё одну кнопку и назначим ей обработчик через свойство:

HTML код:

9
<button id="button">Кнопка</button>

JavaScript:

11
12
13
14
15
var button = document.getElementById('button');
button.onclick = function ()
  {
  alert('Нажата другая кнопка');
  };

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

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

HTML код:

10
<button id="mbutton">Ещё онда кнопка</button>

JavaScript:

17
18
19
20
21
22
var inform = function ()
  {
  alert('Другая кнопка');
  };
var mbutton = document.getElementById('mbutton');
mbutton.onclick = inform;

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

Существует метод addEventListener(), который также назначает обработчик события элементу. Он считается более современным. Сейчас он применяется не часто, но в JavaScript есть новые события, обработать которые можно только с помощью этого метода.

элемент.addEventListener (событие, функция)

Параметры:

событие - событие, которое нужно обрабатывать

функция - функция, которая становится обработчиком

В параметрах данного метода название события пишется в кавычках и слово on перед ним писать не нужно.

Пример:

HTML код:

11
<button id="newbutton">Новая кнопка</button>

JavaScript:

24
25
26
27
28
29
var newinform = function ()
  {
  alert('Нажата новая кнопка');
  };
var newbutton = document.getElementById('newbutton');
newbutton.addEventListener('click', newinform);

Метод removeEventListener() позволяет удалить обработчик.

элемент.removeEventListener (событие, функция)

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

Объект события

При каждом срабатывании события формируется объект события. Объект содержит информацию о событии. У разных типов событий разные объекты. Но существуют и свойства, которые есть у любого объекта. Например, свойство type содержит тип события.

Объект события передаётся в качестве параметра в функцию, которая является обработчиком. Для доступа к объекту нужно в функции создать параметр. Через этот параметр и производится обращение к объекту. Если у функции предполагаются ещё другие параметры, то объект события должен быть первым параметром. Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события. Вместо сообщения о нажатии кнопки, выведем тип события. Теперь обработчик будет выглядеть так:

13
14
15
16
button.onclick = function (event)
  {
  alert(event.type);
  };

Нажмите на кнопку, будет выведен тип сработавшего события.

У всех объектов события есть свойство currentTarget. Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий.