События в JavaScript

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

	<tr><td><code>storage</code></td><td>Событие возникает когда область хранения была изменена в контексте другого документа.</td></tr>
	<tr><td><code></code></td><td></td></tr>
	<tr><td><code>beforeprint</code></td><td>Событие вызывается когда соответствующий документ готов для печати или предварительного просмотра для печати.</td></tr>
	<tr><td><code>afterprint</code></td><td></td></tr>
	
	<tr><td colspan="2" style="background:#5f9ea0;color:#7fffd4">События анимации</td></tr>
	<tr><td><code>animationend</code></td><td>конец анимации</td></tr>
	<tr><td><code>transitionend</code></td><td>Событие <code>transitionend</code> срабатывает, когда CSS transition закончил свое выполнение</td></tr>
	
	<tr><td colspan="2" style="background:#5f9ea0;color:#7fffd4">События буфера обмена</td></tr>
	<tr><td><code>copy</code></td><td>возникает, когда пользователь копирует контент элемента. Для всех элементов.</td></tr>
	<tr><td><code>cut</code></td><td>возникает, когда пользователь вырезает контент элемента. Для всех элементов.</td></tr>
	<tr><td><code>paste</code></td><td>возникает, когда пользователь вставляет контент в элемент. Для всех элементов.</td></tr>
	
	<tr><td colspan="2" style="background:#5f9ea0;color:#7fffd4">События касаний (тач-события)</td></tr>
	<tr><td><code>touchstart</code></td><td>Событие вызывается когда одна или более точек касания расположены на сенсорной поверхности.</td></tr>
	<tr><td><code>touchend</code></td><td>Событие срабатывает когда одна или более точек касания удаляются с сенсорной поверхностью.</td></tr>
	<tr><td><code>touchcancel</code></td><td>Событие вызывается когда одна или несколько точек касания были разрушены в реализации, определенным образом (например, слишком много точек соприкосновения созданы).</td></tr>
	<tr><td><code>touchmove</code></td><td>Событие вызывается когда одна или несколько точек касаний перемещаются по сенсорной поверхности.</td></tr>
	
	<tr><td colspan="2" style="background:#5f9ea0;color:#7fffd4">События Drag-and-Drop</td></tr>
	<tr><td><code>drag</code></td><td></td></tr>
	<tr><td><code>dragend</code></td><td></td></tr>
	<tr><td><code>dragenter</code></td><td> перетаскиваемый объект перетаскивается над dropArea, делая dropArea целью события drop, если пользователь перетащит его туда.</td></tr>
	<tr><td><code>dragexit</code></td><td></td></tr>
	<tr><td><code>dragleave</code></td><td>перетаскиваемый объект перетащили за пределы dropArea на другой элемент, делая его целью события drop вместо dropArea.</td></tr>
	<tr><td><code>dragover</code></td><td></td></tr>
	<tr><td><code>dragstart</code></td><td></td></tr>
	<tr><td><code>drop</code></td><td>пользователь отпустил кнопку мыши, перетаскиваемый объект перетащили на dropArea.</td></tr>
</tbody>

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

Установку слушателя событий делают с помощью метода 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. Всё что связано с математикой в JavaScript с примерами функций и решений, собрано вместе на одной странице.

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

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

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

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