Сколько есть возможных значений event button

Свойства и методы объекта события в JavaScript

Получить детальную информацию о событии в обработчике можно посредством объекта события ( Event ). Данный объект создаёт браузер, когда это событие происходит. В него он помещает много различной информации. Например, для события click : какая клавиша нажата, координаты курсора и др.

Объект события в соответствии со стандартом всегда передаётся обработчику посредством первого аргумента:

Например, выведем детальную информацию в консоль при клике на элемент:

Свойства и методы объекта события

Свойства объекта Event :

• bubbles – логическое значение, указывающее на то является ли данное событие всплывающим;
• cancelable – определяет можно ли событие отменить;
• cancelBubble – при установке true предотвращает всплытие события, т.е. оно всплывать не будет (является псевдонимом метода stopPropagation );
• composed – указывает может ли событие всплывать через из теневого DOM (внутреннего DOM конкретного элемента) в обычный DOM документа;
• currentTarget – элемент, привязанный к обработчику события;
• defaultPrevented – показывает был ли для события вызван метод preventDefault ;
• eventPhase – число, указывающее фазу процесса распространения события (0 – не обрабатывается, 1 – погружение, 2 – целевой элемент, 3 – всплытие);
• isTrusted – указывает вызвано ли событие действием пользователя или программно (посредством использования метода dispatchEvent );
• returnValue – альтернатива для preventDefault ;
• target – элемент, который создал событие;
• timestamp – время, когда произошло событие;
• type – тип (имя) события.

Методы объекта Event :

• preventDefault – отменяет событие, если его конечно можно отменить;
• stopPropagation – предотвращает всплытие события.

Свойства объекта события MouseEvent

Свойства объекта события при click , dblclick , mousedown и mouseup :

• altKey , ctrlKey , metaKey и shiftKey – позволяют узнать была ли нажата соответствующая клавиша (т.е., alt , ctrl , meta и shift ) при возникновении событии;
• which – число, сообщающее о том, какая кнопка мыши была нажата (1 — левая кнопка, 2 — средняя кнопка, 3 — правая кнопка);
• button – также как и which указывает какая кнопка мыши была нажата, чтобы вызвать данное событие (0 – основная кнопка, обычно левая кнопка мыши, 1 – кнопка колёсика или средняя кнопка, 2 – правая кнопка);
• clientX и clientY – координаты курсора относительно левого верхнего угла viewport;
• screenX и screenY – координаты клика относительно верхнего левого угла физического экрана или окна браузера;
• screenX и screenY – координаты клика относительно верхнего левого угла физического экрана или окна браузера;
• pageX и pageY – координаты клика относительно левого верхнего угла отображаемой страницы.

Например, получим координаты курсора при перемещении по документу (событие mousemove ):

Так как в разметке элементы вложены друг в друга, то курсор в большинстве случаев всегда находится одновременно над несколькими элементами. Но взаимодействие всегда осуществляется с тем, кто расположен глубже других (т.е. ближе к нам по оси Z). Если элементы находятся не в основном потоке, то в этом случае с тем, у кого больше значение свойства z-index. Но если элементы имеют одинаковое значение z-index, то тогда ближе к нам будет уже тот, кто из них глубже расположен.

Например, при движении мыши будем выводить информацию о элементе (его значение id ), который в данный момент создаёт событие mousemove :

Свойства объекта события KeyboardEvent

Объект KeyboardEvent позволяет обрабатывать взаимодействия пользователя с клавиатурой:

• altKey , ctrlKey , metaKey и shiftKey – аналогично MouseEvent;
• keyCode и which – код символа;
• code – физической код клавиши на клавиатуре;
• key – значение символа нажатой клавиши;
• location – возвращает число, сообщающее о расположении клавиши на клавиатуре;
• repeat – возвращает true, когда нажата клавиши, ввод которой автоматически повторяется.

В большинстве случаев при работе с клавиатурными событиями пользуются свойствами code и key .

Отличие target от currentTarget

События в браузере по умолчанию всплывают. Из-за этого:

• target – элемент, который вызвал событие;
• currentTarget – элемент, к которому прикреплен обработчик события.

Например, рассмотрим этот код:

При клике на div.inner будет создано событие click , которое будет подниматься от узла div.inner до window (проходя через div.outer , body , html и document соответственно — при условии, что мы не отключили всплытие события с помощью нашего js-кода).

При этом обработчик события мы можем прикрепить к любому из этих узлов ( div.inner , div.outer , body , html , document , window ). Разница между currentTarget и target в том, что target всегда будет указывать на источник события ( .inner ), а currentTarget на элемент к которому мы прикрепили обработчик.

Например, прикрепим обработчик к элементу .outer :

При клике на элемент .inner событие click будет всплывать. В обработчике, который мы назначили элементу .outer , свойство target будет указывать на элемент, который вызвал событие, а currentTarget — на элемент, к которому этот обработчик добавлен, т.е. на .outer .

Использование target и relatedTarget

Свойство relatedTarget предназначено для определения дополнительной цели, связанной с событием.

• для события mouseover свойство target указывает элемент, на который курсор был перемещён, а relatedTarget – с какого;
• для mouseout свойство target указывает элемент, с которого вышел курсор, а relatedTarget – на который он вошёл.

Задачи

1. Удаление элемента при клике на нем

На странице имеется 9 элементов li , расположенные в .items .

Необходимо написать JavaScript сценарий, который будет при клике на элементе удалять его из DOM.

2. Перемещение блока с помощью клавиш «WASD»

Нужно создать код, который будет при нажатии клавиш «WASD» перемещать элемент #box по странице.

3. Одновременное нажатие кнопок

Напишете код, который будет при одновременном нажатии клавиш Z и X показывать в верхней части экрана сообщение.

Основы событий мыши

В этой главе мы более детально рассмотрим события мыши и их свойства.

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

Типы событий мыши

Мы уже видели некоторые из этих событий:

mousedown/mouseup Кнопка мыши нажата/отпущена над элементом. mouseover/mouseout Курсор мыши появляется над элементом и уходит с него. mousemove Каждое движение мыши над элементом генерирует это событие. click Вызывается при mousedown , а затем mouseup над одним и тем же элементом, если использовалась левая кнопка мыши. dblclick Вызывается двойным кликом на элементе. contextmenu Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.

…Есть также несколько иных типов событий, которые мы рассмотрим позже.

Порядок событий

Как вы можете видеть из приведённого выше списка, действие пользователя может вызвать несколько событий.

Например, клик мышью вначале вызывает mousedown , когда кнопка нажата, затем mouseup и click , когда она отпущена.

В случае, когда одно действие инициирует несколько событий, порядок их выполнения фиксирован. То есть обработчики событий вызываются в следующем порядке: mousedown → mouseup → click .

Кликните на кнопку ниже, и вы увидите события. Также попробуйте двойной клик.

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

Кроме того, мы можем видеть свойство button , которое позволяет нам определять кнопку мыши; это объясняется ниже.

Кнопки мыши

События, связанные с кликом, всегда имеют свойство button , которое позволяет получить конкретную кнопку мыши.

Обычно мы не используем его для событий click и contextmenu , потому что первое происходит только при щелчке левой кнопкой мыши, а второе – только при щелчке правой кнопкой мыши.

С другой стороны, обработчикам mousedown и mouseup может потребоваться event.button , потому что эти события срабатывают на любую кнопку, таким образом button позволяет различать «нажатие правой кнопки» и «нажатие левой кнопки».

Возможными значениями event.button являются:

Состояние кнопки	event.button
Левая кнопка (основная)	0
Средняя кнопка (вспомогательная)	1
Правая кнопка (вторичная)	2
Кнопка X1 (назад)	3
Кнопка X2 (вперёд)	4

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

Также есть свойство event.buttons , в котором все нажатые в данный момент кнопки представлены в виде целого числа, по одному биту на кнопку. На практике это свойство используется очень редко, вы можете найти подробную информацию по адресу MDN, если вам это когда-нибудь понадобится.

В старом коде вы можете встретить event.which свойство – это старый нестандартный способ получения кнопки с возможными значениями:

• event.which == 1 – левая кнопка,
• event.which == 2 – средняя кнопка,
• event.which == 3 – правая кнопка.

На данный момент event.which устарел, нам не следует его использовать.

Средняя кнопка сейчас – скорее экзотика, и используется очень редко.

Модификаторы: shift, alt, ctrl и meta

Все события мыши включают в себя информацию о нажатых клавишах-модификаторах.

• shiftKey : Shift
• altKey : Alt (или Opt для Mac)
• ctrlKey : Ctrl
• metaKey : Cmd для Mac

Они равны true , если во время события была нажата соответствующая клавиша.

Например, кнопка внизу работает только при комбинации Alt + Shift +клик:

В Windows и Linux клавишами-модификаторами являются Alt , Shift и Ctrl . На Mac есть ещё одна: Cmd , которой соответствует свойство metaKey .

В большинстве приложений, когда в Windows/Linux используется Ctrl , на Mac используется Cmd .

То есть, когда пользователь Windows нажимает Ctrl + Enter и Ctrl + A , пользователь Mac нажимает Cmd + Enter или Cmd + A , и так далее.

Поэтому, если мы хотим поддерживать такие комбинации, как Ctrl +клик, то для Mac имеет смысл использовать Cmd +клик. Это удобней для пользователей Mac.

Даже если мы и хотели бы заставить людей на Mac использовать именно Ctrl +клик, это довольно сложно. Проблема в том, что левый клик в сочетании с Ctrl интерпретируется как правый клик на MacOS и генерирует событие contextmenu , а не click как на Windows/Linux.

Поэтому, если мы хотим, чтобы пользователям всех операционных систем было удобно, то вместе с ctrlKey нам нужно проверять metaKey .

Для JS-кода это означает, что мы должны проверить if (event.ctrlKey || event.metaKey) .

Комбинации клавиш хороши в качестве дополнения к рабочему процессу. Так что, если посетитель использует клавиатуру – они работают.

Но если на их устройстве его нет – тогда должен быть способ жить без клавиш-модификаторов.

Координаты: clientX/Y, pageX/Y

Все события мыши имеют координаты двух видов:

1. Относительно окна: clientX и clientY .
2. Относительно документа: pageX и pageY .

Мы уже рассмотрели разницу между ними в главе Координаты.

Если в кратце, то относительные координаты документа pageX/Y отсчитываются от левого верхнего угла документа и не меняются при прокрутке страницы, в то время как clientX/Y отсчитываются от левого верхнего угла текущего окна. Когда страница прокручивается, они меняются.

Например, если у нас есть окно размером 500×500, и курсор мыши находится в левом верхнем углу, то значения clientX и clientY равны 0 , независимо от того, как прокручивается страница.

А если мышь находится в центре окна, то значения clientX и clientY равны 250 независимо от того, в каком месте документа она находится и до какого места документ прокручен. В этом они похожи на position:fixed .

Наведите курсор мыши на поле ввода, чтобы увидеть clientX/clientY (пример находится в iframe , поэтому координаты определяются относительно этого iframe ):

Координаты относительно документа pageX , pageY отсчитываются не от окна, а от левого верхнего угла документа. Подробнее о координатах вы можете узнать в главе Координаты.

Отключаем выделение

Двойной клик мыши имеет побочный эффект, который может быть неудобен в некоторых интерфейсах: он выделяет текст.

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

Если зажать левую кнопку мыши и, не отпуская кнопку, провести мышью, то также будет выделение, которое в интерфейсах может быть «не кстати».

Есть несколько способов запретить выделение, о которых вы можете прочитать в главе Selection и Range.

В данном случае самым разумным будет отменить действие браузера по умолчанию при событии mousedown , это отменит оба этих выделения:

Теперь выделенный жирным элемент не выделяется при двойном клике, а также на нём нельзя начать выделение, зажав кнопку мыши.

Заметим, что текст внутри него по-прежнему можно выделить, если начать выделение не на самом тексте, а до него или после. Обычно это нормально воспринимается пользователями.

Если мы хотим отключить выделение для защиты содержимого страницы от копирования, то мы можем использовать другое событие: oncopy .

Если вы попытаетесь скопировать текст в <div> , у вас это не получится, потому что срабатывание события oncopy по умолчанию запрещено.

Конечно, пользователь имеет доступ к HTML-коду страницы и может взять текст оттуда, но не все знают, как это сделать.

Итого

События мыши имеют следующие свойства:

Клавиши-модификаторы ( true если нажаты): altKey , ctrlKey , shiftKey и metaKey (Mac).

• Если вы планируете обработать Ctrl , то не забудьте, что пользователи Mac обычно используют Cmd , поэтому лучше проверить if (e.metaKey || e.ctrlKey) .

Координаты относительно окна: clientX/clientY .

Координаты относительно документа: pageX/pageY .

Действие по умолчанию события mousedown – начало выделения, если в интерфейсе оно скорее мешает, его можно отменить.

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

Задачи

Выделяемый список

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

Основы работы с объектом Event на JavaScript

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

• Урок №
  Учебник
  по регулярным выражениям
• Урок №
  Работа с регулярными
  выражениями. Глава 1.
• Урок №
  Работа с регулярными
  выражениями. Глава 2.
• Урок №
  Работа с регулярными
  выражениями. Глава 3.
• Урок №
  Работа с регулярными
  выражениям. Глава 4.
• Урок №
  Отличия
  от PHP версии

Разное

• Урок №
  Работа
  с форматом JSON
• Урок №
  Работа
  с куки (cookie)
• Урок №
  Работа
  с локальным хранилищем
• Урок №
  Анимация
  и другие эффекты

Работа с канвасом

• Урок №
  Учебник
  по работе с canvas
• Урок №
  Основы
  работы с canvas
• Урок №
  Продвинутая
  работа с canvas

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript —>
  Работа с
  AJAX + PHP —>

Контекст

• Урок №
  Работа
  с контекстом и this
• Урок №
  Продвинутая
  работа с контекстом

Drag-and-Drop

• Урок №
  новая вкладка с new.code.mu
  Доступные события
• Урок №
  новая вкладка с new.code.mu
  Перемещение элемента по окну
• Урок №
  новая вкладка с new.code.mu
  Перемещение на другой элемент
• Урок №
  новая вкладка с new.code.mu
  Объект event.dataTransfer
• Урок №
  новая вкладка с new.code.mu
  Картинка при перетягивании
• Урок №
  новая вкладка с new.code.mu
  Вид курсора

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

• Урок №
  новая вкладка ютуб
  Игра 5 точек в ряд без ООП для разминки
• Урок №
  новая вкладка ютуб
  Игра 5 точек в ряд ООП вариант
• Урок №
  новая вкладка ютуб
  Хранение массива в локальном хранилище (предварительная теория)
• Урок №
  новая вкладка ютуб
  Стикеры ООП (нужны основы Drag-and-Drop, выше в учебнике есть)

Практика

• Урок №
  новая вкладка с new.code.mu
  Тип Symbol
• Урок №
  новая вкладка с new.code.mu
  Итераторы и генераторы

Promise ES6

• Урок №
  новая вкладка с new.code.mu
  Функции resolve reject
• Урок №
  новая вкладка с new.code.mu
  Метод catch
• Урок №
  новая вкладка с new.code.mu
  Цепочки промисов
• Урок №
  новая вкладка с new.code.mu
  Перехват ошибок
• Урок №
  новая вкладка с new.code.mu
  Promise.all
• Урок №
  новая вкладка с new.code.mu
  Promise.race
• Урок №
  новая вкладка с new.code.mu
  async await
• Урок №
  новая вкладка с new.code.mu
  Загрузка картинок

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

• Урок №
  Учебник
  jQuery для новичков
• Урок №
  Основы
  работы с jQuery
• Урок №
  Манипулирование
  элементами страницы
• Урок №
  Работа
  с набором элементов
• Урок №
  Работа
  с событиями jQuery
• Урок №
  Эффекты и анимация
  библиотеки jQuery
• Урок №
  Практика на отработку
  библиотеки jQuery
• Урок №
  Работа с
  библиотекой jQueryUI
• Урок №
  Популярные плагины
  библиотеки jQuery

Объект Event (объект Событие) содержит в себе информацию о произошедшем событии. К примеру, если по элементу был сделан клик, мы можем узнать координаты этого клика, была ли нажата клавиша Ctrl, Alt или Shift в момент клика и так далее.

Как получить объект Event

Пусть у нас есть элемент, по клику на который выполнится функция func:

Внутри привязанной функции уже есть объект Event — мы просто пока еще не знаем, как его получить. Получается он следующем образом: нужно при объявлении нашей функции func передать в нее параметром любую переменную (например, event — но название может быть любым) и в эту переменную браузер автоматически положит объект Event:

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

Еще раз: если при привязывании функции к событию этой функции задать параметр — в этот параметр браузер автоматически положит объект Event. Название этого параметра будет любым — как назовете, так и будете к нему обращаться.

Координаты клика

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

Пусть в переменной event лежит объект Event. В этом случае координаты клика относительно окна браузера можно найти так: event.clientX для координаты по горизонтали и event.clientY для координаты по вертикали.

Рассмотрим пример: привяжем блоку событие onmousemove (срабатывает при движении мышкой по элементу), и будем показывать координаты курсора при движении мыши:

Поводите мышкой по элементу — вы увидите, как меняются координаты:

Кроме свойств clientX и clientY существуют также свойства pageX и pageY. Давайте посмотрим разницу между ними.

Как работают clientX и clientY: если у вас есть окно 1000 на 1000 пикселей, и мышь находится в центре, то clientX и clientY будут оба равны 500. Если вы затем прокрутите страницу по горизонтали или вертикали, не двигая курсор, то значения clientX и clientY не изменятся, так как отсчитываются относительно окна, а не документа.

Как работают pageX и pageY: если у вас есть окно 1000 на 1000 пикселей, и курсор находится в центре, то pageX и pageY будут равны 500. Если вы затем прокрутите страницу на 250 пикселей вниз, то pageY станет равным 750.

Таким образом pageX и pageY содержат координаты события с учетом прокрутки.

Тип события

Объект Event также содержит в себе тип события, к примеру для события onclick это click, для onmouseover это mouseover и так далее. Доступ к типу события можно получить так — event.type:

Элемент события

С помощью event.target можно получить элемент, в котором произошло событие. Зачем это нужно, если этот элемент содержится в this? Ответ на этот вопрос даст пример ниже.

Пусть у нас есть div, а внутри него абзац. Привяжем событие к диву, но кликнем по абзацу — в этом случае event.target будет содержать конечный тег, в котором случилось событие — то есть абзац, а не див. Убедимся в этом с помощью tagName:

Нажатые клавиши

Давайте теперь будем получать нажатые клавиши. Это актуально для тех событий, в которых происходит работа с клавиатурой, например, в onkeypress, onkeydown, onkeyup.

Для получение нажатых клавиш следует использовать свойство event.keyCode. Оно, однако, возвращает не саму клавишу, а ее код. Этот код можно преобразовать в символ с помощью метода String.fromCharCode.

Рассмотрим пример: вводите текст в инпут и по мере ввода вы будете видеть код нажатой клавиши и саму клавишу:

Введите текст в инпут:

Ctrl, Alt, Shift

Можно узнать, были ли нажаты в момент события клавиши Ctrl, Alt и Shift. Это делается с помощью свойств event.ctrlKey, event.altKey и event.shiftKey — они имеют значение true или false в зависимости от того, была ли нажата эта клавиша в момент события или нет.

В следующем примере при клике на кнопку будем выводить сообщение о том, была ли нажата одна из клавиш Ctrl, Alt или Shift:

Нажмите на кнопку, зажав при этом Ctrl, Alt или Shift:

Отмена действия

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

Если событие привязывается через атрибут — отменить действие по умолчанию можно, если в конце атрибута написать return: false, вот так: onclick=»какой-то код; return: false;».

Рассмотрим их действие на следующем примере: попробуйте перейти по ссылке или что-нибудь ввести в поле — у вас ничего не получится:

Результат выполнения кода:

До return false может быть любой JavaScript код — он выполнится, но действие пользователя будет отменено.

А вот если событие привязывается через JavaScript — то его действие можно отменить с помощью объекта Event, вот так: event.preventDefault().

Давайте сделаем так, чтобы по клику на ссылку не происходило перехода на другую страницу:

Результат выполнения кода:

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Учебник JavaScript

• Урок №
  Учебник
  JavaScript для новичков
• Урок №
  Основы
  языка JavaScript
• Урок №
  Основы работы
  с массивами и объектами
• Урок №
  Работа с конструкциями
  if-else и switch-case
• Урок №
  Работа с циклами
  for и while
• Урок №
  Работа
  с математическими функциями
• Урок №
  Работа со строковыми
  функциями в JavaScript
• Урок №
  Функции
  работы с массивами
• Урок №
  Практика на комбинации
  стандартных функций
• Урок №
  Основы работы
  с пользовательскими функциями
• Урок №
  Приемы работы
  с флагами
• Урок №
  Приемы работы
  с логическими значениями
• Урок №
  Приемы работы
  с циклами
• Урок №
  Приемы работы
  с массивами
• Урок №
  Правильное использование
  пользовательских функций
• Урок №
  Практика на
  пользовательские функции
• Урок №
  Продвинутая работа
  с пользовательскими функциями

Практика

Работа с DOM

• Урок №
  Основы
  работы с DOM
• Урок №
  Работа
  с элементами HTML страницы
• Урок №
  Работа
  с датами в JavaScript
• Урок №
  Работа
  с таймерами в JavaScript
• Урок №
  Продвинутая
  работа с событиями
• Урок №
  Продвинутая
  работа с DOM
• Урок №
  Работа
  с метриками
• Урок №
  Работа
  с метриками для window
• Урок №
  Основы работы
  с объектом Event
• Урок №
  Продвинутая работа
  с объектом Event
• Урок №
  Разные
  полезные темы
• Урок №
  новая вкладка с new.code.mu
  Работа с узлами

Практика

• Урок №
  Практика
  JavaScript для новичков
• Урок №
  Практика
  минипроекты JavaScript
• Урок №
  новая вкладка ютуб
  Разбор квадратного календарика
• Урок №
  новая вкладка ютуб
  Разбор игры найди случайное число в таблице

Некоторые продвинутые вещи

• Урок №
  Анонимные
  функции и замыкания
• Урок №
  Некоторые продвинутые
  функции JavaScript
• Урок №
  Нюансы
  работы с событиями

• Урок №
  Нововведения
  в ES6 для новичков
• Урок №
  новая вкладка с new.code.mu
  Коллекция Set
• Урок №
  новая вкладка с new.code.mu
  Коллекция Map

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Свойства объекта события по классам

Любое событие создаёт объект, в котором содержится полезная информация о данном событии. Он базируется на общем объекте Event , но, также, содержит дополнительную информацию о том, что случилось. Дополнительная информация зависит от типа произошедшего события (события мыши, клавиатуры и т.д.) и содержится в свойствах, которые наследуются от соответствующего класса ( MouseEvent , KeyboardEvent и т.д.).

Ниже представлены свойства, которые доступны в объекте event в зависимости от типа события.

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

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

Устаревшие свойства keyCode , charCode и which удалены из спецификации. Их использование нежелательно, так как может вызвать проблемы при работе программы.

Чтобы узнать, какой символ введён пользователем, используется свойство event.key .

Свойство key возвращает строку, содержащую одно из следующих значений:

• Если клавиша имеет печатное представление (буквы, цифры, спецсимволы), то возвращается строка из одного символа, который был бы напечатан при нажатии данной клавиши.
• Если нажата функциональная клавиша ( F1 — F12 , табуляция, стрелки и т.д.), то возвращается предопределённое значение, соответствующее данной клавише.
• Если нажата комбинация клавиш, которая используется браузером для внутренних действий (сочетание Ctrl + A выделяет текст), то возвращается символ, соответствующий печатной клавише.

Событие keypress срабатывает не всегда. При нажатии на клавиши-модификаторы ( Ctrl , Shift и т.п.) событие keypress не срабатывает.

При нажатии на клавиши внутри текстового поля можно посмотреть, какие значения возвращает свойство key .

Свойство key поддерживается не всеми браузерами, поэтому данный пример можно использовать для проверки работоспособности свойства.

Чтобы узнать физическое расположение нажатой клавиши на клавиатуре, используется свойство event.code .

Свойство code представляет значение, которое не зависит ни от раскладки клавиатуры, ни от нажатия клавиш-модификаторов. Нажатию одной клавиши может соответствовать несколько различных символов, поэтому полученное значение не получится использовать для представления в виде текста.

При нажатии на клавиши внутри текстового поля можно посмотреть, какие значения возвращает свойство code .

Свойство code поддерживается не всеми браузерами, поэтому данный пример можно использовать для проверки работоспособности свойства.

Клавиши-модификаторы

Чтобы проверить, была ли зажата клавиша-модификатор в момент вызова события, можно воспользоваться следующими свойствами (имеют булевые значения):

• event.altKey — клавиша Alt .
• event.ctrlKey — клавиша Ctrl .
• event.metaKey — клавиша Command или Windows .
• event.shiftKey — клавиша Shift .

Данные свойства доступны и для событий мыши.

При нажатии сочетаний клавиш внутри текстового поля скрипт покажет, какие клавиши были зажаты.

Свойства событий мыши

Мышь — это основной манипулятор, которым пользуется посетитель сайта. События мыши имеют несколько очень полезных свойств.

button

С помощью свойства event.button можно узнать, какая кнопка мыши была нажата в момент вызова события.

Свойство button может иметь одно из значений:

• -1 — никакая кнопка не нажата.
• 0 — нажата основная кнопка (обычно это левая кнопка).
• 1 — нажата средняя кнопка (обычно это колёсико).
• 2 — нажата вторая кнопка (обычно это правая кнопка).
• 3 — нажата четвёртая кнопка (обычно это кнопка Назад ).
• 4 — нажата пятая кнопка (обычно это кнопка Вперёд ).

clientX , clientY

Свойства event.clientX и event.clientY содержат координаты указателя мыши на момент возникновения события. Данные координаты отсчитываются относительно окна документа (относительно видимой области окна), то есть эти координаты могут меняться в зависимости от прокрутки страницы. Начало координат берётся в верхнем левом углу видимой области окна.

В качестве единиц измерения координат используются пиксели.

pageX , pageY

Свойства event.pageX и event.pageY содержат координаты указателя мыши на момент возникновения события. Данные координаты отсчитываются относительно всего документа, то есть эти координаты не меняются при прокрутке страницы. Начало координат берётся в верхнем левом углу документа.

В качестве единиц измерения координат используются пиксели.

screenX , screenY

Свойства event.screenX и event.screenY содержат координаты указателя мыши на момент возникновения события. Данные координаты отсчитываются относительно экрана монитора. Начало координат берётся в верхнем левом углу экрана.

В качестве единиц измерения координат используются пиксели.

• Панель навигации
• Размер шрифта
  1. Автоматически
  2. Самый мелкий
  3. Мелкий
  4. Средний
  5. Крупный
  6. Самый крупный
• Цветовая схема
  1. Тёмная
  2. Светлая

© 2014-2023 WebGentleman | WG
При использовании материалов сайта ссылка на исходную статью обязательна