События в JavaScript

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Событие	Описание
`error`	Не удалось загрузить ресурс.
`abort`	Загрузка ресурса была прервана.
`load`	браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
`DOMContentLoaded`	когда HTML загружен и обработан, DOM документа полностью построен и доступен.
`beforeunload`	пользователь покидает страницу. Мы можем проверить, сохранил ли он изменения и спросить, на самом ли деле он хочет уйти.
`unload`	пользователь почти ушёл, но мы всё ещё можем запустить некоторые операции, например, отправить статистику.
`resize`	Событие запускается когда размер документа был изменён.
`orientationchange`	Событие запускается когда изменилась ориентация устройства.
`scroll`	Событие прокрутки, позволяет реагировать на прокрутку страницы или элемента.

События мыши
`click`	Событие происходит когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
`dblclick`	Событие возникает когда пользователь дважды нажимает на элемент. Он срабатывает после двух событий `click`.
`contextmenu`	Событие происходит происходит, когда кликнули на элемент правой кнопкой мыши.
`mouseover`	Событие происходит когда мышь наводится на элемент.
`mouseout`	Событие происходит когда мышь покидает элемент.
`mouseenter`	курсор наводится на элемент или на его дочерние элементы
`mouseleave`	курсор полностью покидает элемент и его дочерние элементы
`mousedown`	Событие происходит когда нажали кнопку мыши на элементе.
`mouseup`	Событие происходит когда отжали кнопку мыши на элементе.
`mousemove`	Событие происходит при движении мыши.

События клавиатуры
`keydown`	Событие происходит когда пользователь нажимает клавишу.
`keyup`	Событие происходит когда пользователь отпускает клавишу.
`keypress`	Устаревшая. Эта функция больше не рекомендуется.
События формы
`change`	когда значение элемента изменилось.
`input`	срабатывает каждый раз при изменении значения. В отличие от событий клавиатуры, оно работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи при диктовке текста.
`focus`	срабатывает в момент получения элементом фокуса.
`blur`	срабатывает когда элемент теряет фокус.
`submit`	пользователь отправил форму
`invalid`	если элемент не прошел валидацию, только для тега `input`.

`storage`	Событие возникает когда область хранения была изменена в контексте другого документа.

`beforeprint`	Событие вызывается когда соответствующий документ готов для печати или предварительного просмотра для печати.
`afterprint`
События анимации
`animationend`	конец анимации
`transitionend`	Событие `transitionend` срабатывает, когда CSS transition закончил свое выполнение
События буфера обмена
`copy`	возникает, когда пользователь копирует контент элемента. Для всех элементов.
`cut`	возникает, когда пользователь вырезает контент элемента. Для всех элементов.
`paste`	возникает, когда пользователь вставляет контент в элемент. Для всех элементов.
События касаний (тач-события)
`touchstart`	Событие вызывается когда одна или более точек касания расположены на сенсорной поверхности.
`touchend`	Событие срабатывает когда одна или более точек касания удаляются с сенсорной поверхностью.
`touchcancel`	Событие вызывается когда одна или несколько точек касания были разрушены в реализации, определенным образом (например, слишком много точек соприкосновения созданы).
`touchmove`	Событие вызывается когда одна или несколько точек касаний перемещаются по сенсорной поверхности.
События Drag-and-Drop
`drag`
`dragend`
`dragenter`	перетаскиваемый объект перетаскивается над dropArea, делая dropArea целью события drop, если пользователь перетащит его туда.
`dragexit`
`dragleave`	перетаскиваемый объект перетащили за пределы dropArea на другой элемент, делая его целью события drop вместо dropArea.
`dragover`
`dragstart`
`drop`	пользователь отпустил кнопку мыши, перетаскиваемый объект перетащили на dropArea.

Установка слушателя событий

Установку слушателя событий делают с помощью метода addEventListener()

target.addEventListener(type, listener[, options]);

type - строка, представляющая тип прослушиваемого события: let eventType = event.type;
listener - объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс EventListener или просто функция JavaScript
options (необязательно) - объект options, который определяет характеристики объекта, прослушивающего событие.

Удаление слушателя

Удаление слушателя событий делают с помощью метода removeEventListener()

target.removeEventListener(type, listener[, options]);

removeEventListener удаляет обработчик события зарегистрированный при помощи addEventListener. Обработчик определяется типом события, самой функцией обработки события и дополнительными параметрами переданными при регистрации обработчика.

Генерация собственных событий

let event = new Event(type[, options]);

type – тип события, строка, например "click" или же любой придуманный нами – "my-event"
options – объект с двумя необязательными свойствами: bubbles и cancelable. По умолчанию оба свойства установлены в false: {bubbles: false, cancelable: false}.

Подробно о генерации собственных событий здесь: https://learn.javascript.ru/dispatch-events

JavaScript методы, свойства и события для video и audio

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

Генератор случайных чисел кратных заданному значению

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

Гугл карта для сайта - Google Maps API

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

Методы консоли в JavaScript

В JavaScript специально для работы с консолью есть объект console. Ниже описаны доступные для объекта Console методы и приведены несколько примеров их использования.

Методы массивов JavaScript

Методы массивов в JavaScript и примеры их использования: push, pop, unshift, shift, split, join, slice, splice, reverse, map, filter, reduce, sort, includes ...

Получение параметров из урла

Данное решение - это готовая javascript-функция, которая послужит для получения параметров из url-адреса веб-страницы.

Комментарии 0

*** Войдите чтобы писать комментарии.