Уроки 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);