Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 03.10.2022)
60430
солдат
265
самолетов
228
вертолетов
2380
танков
4991
ББМ
1405
артиллерия
176
ПВО
338
РСЗО
3811
машин
15
корабли и катера
Уроки JavaScript – Краткий обзор событий в браузере

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

 

 

 

Добавить комментарий

Ваш адрес email не будет опубликован.