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

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

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

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

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

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

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

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

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

<button onclick="alert('Нажата кнопка')">Кнопка</button>

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

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

HTML код:

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

JavaScript:

let button = document.getElementById('button');

button.onclick = function()
{
  alert('Нажата другая кнопка');
};

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

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

HTML код:

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

JavaScript:

let Inform = function()
{
  alert('Другая кнопка');
};

let newButton = document.getElementById('new_button');
newButton.onclick = Inform;

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

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

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

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

Пример:

HTML код:

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

JavaScript:

let NewInform = function()
{
  alert('Информация о нажатии кнопки');
};

let infButton = document.getElementById('inf_button');
infButton.addEventListener('click', NewInform);

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

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

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

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

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

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

Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события и выведем тип события. Теперь обработчик будет выглядеть так:

button.onclick = function(event)
  {
  alert(event.type);
  };

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

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