Уроки JavaScript – Краткий обзор событий в браузере

Прежде, чем мы перейдем к рассмотрению данной темы, важно сделать акцент на одной вещи: дерево DOM и язык JavaScript – это две разные сущности. События браузера являются частью API DOM, но они не являются частью JavaScript.

События браузера являются основой любого веб-приложения и они очень часто используются в JavaScript. Именно через эти события мы определяем то, что должно произойти. Если в вашем документе есть кнопка, и вам требуется проверка формы при ее нажатии, вы должны использовать событие «click».

Стандартные события браузера

Для начала рассмотрим основные стандартные события браузера:

События мыши

• ‘mousedown‘ – событие mousedown вызывается, когда указывающее устройство (обычно мышь) нажимается вниз над элементом.
• ‘mouseup‘ – событие mouseup вызывается, когда указывающее устройство (обычно мышь) отпускается вверх над элементом.
• ‘click‘ – событие click определяется как mousedown, за которым следует mouseup в том же положении.
• ‘dblclick‘ – это событие вызывается, когда на элементе кликают дважды в быстрой последовательности в одной и той же позиции (двойной клик).
• ‘mouseover‘ – событие mouseover вызывается, когда устройство перемещается над элементом.
• ‘mouseout‘ – событие mouseout вызывается, когда указывающее устройство перемещается в сторону от элемента.
• ‘mousemove‘ – событие mousemove вызывается, когда указывающее устройство перемещается при наведении на элемент.

События клавиатуры

• ‘keypress‘ – это событие вызывается при каждом нажатии клавиши на клавиатуре.
• ‘keydown‘ – это событие также срабатывает при каждом нажатии клавиши, оно запускается до события keypress.
• ‘keyup‘ – это событие вызывается при отпускании клавиши после событий keydown и keypress.

События формы

• ‘select‘ – это событие вызывается, когда выбран текст внутри текстового поля (input, textarea и т. д.).
• ‘change‘ – это событие вызывается, когда элемент управления теряет фокус ввода и/или значение было изменено с момента получения фокуса.
• ‘submit‘ – это событие вызывается при отправке формы.
• ‘reset‘ – это событие вызывается при сбросе формы.
• ‘focus‘ – это событие вызывается, когда элемент получает фокус (обычно от курсора мыши).
• ‘blur‘ – это событие вызывается, когда элемент теряет фокус.

Другие события

• ‘load‘ – это событие вызывается, когда браузер завершил загрузку всего содержимого в документе, включая контент, картинки, фреймы и объекты.
• ‘resize‘ – это событие вызывается при изменении размера документа (т.е. когда изменяется размер браузера)
• ‘scroll‘ – это событие вызывается при прокрутке документа.
• ‘unload‘ – это событие вызывается, когда браузер удаляет весь контент из окна или фрейма, т.е. когда вы покидаете страницу.

Есть еще много и других событий. Те, что показаны выше, являются основными, и с ними вы будете часто сталкиваться в JavaScript коде. Имейте в виду, что некоторые из них имеют различия в разных браузерах. Кроме того, имейте в виду, что многие браузеры реализуют собственные специфичные события.

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

Мы вкратце рассмотрели события, но нам еще предстоит обсудить процесс связывания определенных функций с событием. Вот где происходит волшебство. Все перечисленные выше события будут происходить независимо от того, написали ли вы какой-либо код JavaScript, поэтому, чтобы использовать их возможности, вы должны зарегистрировать «обработчики событий», — это функции, которые используются для обработки события. Ниже представлен простой пример использования базовой модели регистрации событий (также известной как «традиционная регистрация событий»):

<button id="some-button">Нажми меня!</button>
// JavaScript:
var someElement = document.getElementById('some-button');
// Эта функция будет нашим обработчиком событий:
function clickButton() {
  alert('Вы только что нажали кнопку!');
}
// Здесь регистрация события:
someElement.onclick = clickButton;

У нас есть кнопка с идентификатором «some-button», и мы получили к ней доступ с помощью document.getElementById. Затем мы создаем новую функцию, которая позже назначается свойству DOM «onclick» кнопки. Вот и все, что нужно сделать!

Модель «регистрации базового события» настолько проста, насколько это возможно. Вы добавляете префикс к событию после «on» и получаете к нему доступ как к свойству любого элемента. По сути, это иная версия выполнения чего-то подобного (что не есть рекомендуемым):

<button onclick="return clickButton()">Нажми меня!</button>

Встроенная обработка событий (с использованием атрибутов HTML) делает поддержку вашего сайта намного сложной. Лучше использовать ненавязчивый JavaScript и хранить все это в соответствующих файлах .js, которые могут подключаться в документ по мере необходимости. Причину, по которой вы не должны использовать встроенную обработку событий, можно сравнить с причиной, по которой не желательно использовать встроенные CSS стили (используя style="…").

Расширенная регистрация события

Название «расширенная» не должна вводить вас в заблуждение, — это не означает, что ее лучше использовать. Рассмотренная выше методика (базовая модель регистрации) идеально подходит в большинстве случаев. Использование базовой техники имеет одно ключевое ограничение – вы не можете привязать более одной функции к событию. Это не так уж и плохо, поскольку вы можете вызывать любое количество других функций из этой единственной функции, но если вам нужно больше контроля, тогда используйте расширенную модель регистрации событий.

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

Ниже пример данной модели:

var myParagraph = document.getElementById('paragraph');
myParagraph.addEventListener('click', paragraphClick, false);
// функция paragraphClick:
function paragraphClick() {
  alert('Вы нажали на параграф!');
}

Методы addEventListener и removeEventListener

Методы addEventListener и removeEventListener являются одними из популярных способов присвоить или удалить обработчик. Они также позволяют использовать большое количество любых других обработчиков.

Присвоение обработчика осуществляется вызовом метода addEventListener с указанием 3-х аргументов:

element.addEventListener(event, handler, phase);

• event: тип события, например click
• handler: ссылка на функцию, которая будет выступать обработчиком
• phase: булево значение, которое определяет, на какой фазе должен сработать обработчик. Необязательный аргумент. true – фаза перехвата, false – фаза всплытия

Удаление обработчика осуществляется вызовом метода removeEventListener, с передачей тех же аргументов, что были у addEventListener:

element.removeEventListener(event, handler, phase);