Обработка событий в 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 (событие, функция)

Назначение обработчика с помощью addEventListener() имеет одно важное отличие. Этот метод позволяет назначить элемену несколько обработчиков одного и того же события. Другими способами это сделать невозможно. Они просто перезапишут обработчик. Поэтому метод addEventListener() нужно применять к каким-то важным элементам страницы, с которыми могут работать разные скрипты. Ведь возможна ситуация, когда у элемента уже есть обработчик конкретного события. А вы хотите добавить ещё один. Если оба обработчика назначены через addEventListener(), то они оба сработают. И все скрипты выполнятся, как нужно.

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

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

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

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

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

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

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