Блок предоставляет набор JS-классов, реализующий механизмы работы с событиями.
| Класс | Конструктор | Описание |
|---|---|---|
| Event | Event({String} type, {Object} target) |
Служит для создания объекта события, изменения и проверки его состояний. |
| Emitter | - | Служит для генерации событий и подписки на них. |
| Класс | Имя | Тип или возвращаемое значение | Описание |
|---|---|---|---|
| Event | type | {String} | Тип события. |
| result | {*} |
Результат, возвращенный последним обработчиком события. | |
| target | {Object} | Объект на котором возникло событие. | |
| data | {*} |
Данные, передаваемые как аргумент обработчику. | |
| preventDefault() | - | Позволяет предотвратить выполнение стандартного действия предусмотренного для события. | |
| isDefaultPrevented() | {Boolean} |
Проверяет, было ли предотвращено выполнение стандартного действия, предусмотренного для события. | |
| stopPropagation() | - | Позволяет остановить всплывание события. | |
| isPropagationStopped() | {Boolean} |
Проверяет, было ли остановлено всплывание события. | |
| Emitter | on({String} type, [{Object} data], {Function} fn, [{Object} ctx]) |
- | Служит для подписки на событие определенного типа. |
once({String} type, [{Object} data], {Function} fn, [{Object} ctx]) |
- | Служит для подписки на событие определенного типа. Обработчик выполняется единожды. | |
un({String} type, {Function} fn, [{Object} ctx]) |
- | Служит для удаления подписки на событие определенного типа. | |
emit({String|events:Event} type, [{Object} data]) |
- | Служит для генерации события. |
| Элемент | Способы использования | Описание |
|---|---|---|
| channels | JS |
Предназначен для работы с именованными каналами событий. |
| Элемент | Функция | Возвращаемое значение | Описание |
|---|---|---|---|
| channels | channels([{String} id], [{Boolean} drop]) |
{Object}|{undefined} |
Создает или удаляет именованный канал событий. |
Блок реализован в технологиях:
vanilla.jsEventС помощью класса можно инстанцировать объект события, указав его тип и источник. Для этого нужно воспользоваться функцией-конструктором Event.
Принимаемые аргументы:
type {String} – тип события. Обязательный аргумент.target {Object} – объект (источник) на котором событие возникло. Обязательный аргумент.Возвращаемое значение: {Event}. Объект события.
typeТип: {String}.
Тип события.
modules.require(['events'], function(events) {
var myevent = new events.Event('myevent', this);
console.log(myevent.type); // 'myevent'
});
targetТип: {Object}.
Объект, на котором возникло событие.
resultТип: {*}.
Содержит данные, возвращаемые последней функцией-обработчиком события.
modules.require(['events'], function(events) {
var myEmitter = new events.Emitter();
myEmitter.on('myevent', function() { return 'hi-hi-hi'; });
var myEvent = new events.Event('myevent');
myEmitter.emit(myEvent)
console.log(myEvent.result); // 'hi-hi-hi'
});
dataТип: {*}.
Содержит данные, передаваемые функции-обработчику события в качестве аргумента.
modules.require(['events'], function(events) {
var myEmitter = new events.Emitter();
myEmitter.on('myevent', 'my-data', function(e) { console.log(e.data); });
myEmitter.emit('myevent'); // my-data
});
preventDefaultПозволяет предотвратить выполнение стандартного действия предусмотренного для события.
Не принимает аргументов.
Не имеет возвращаемого значения.
isDefaultPreventedПозволяет проверить было ли предотвращено выполнение стандартного действия для события.
Не принимает аргументов.
Возвращаемое значение: {Boolean}. В случае, если выполнение стандартного действия было предотвращено – true.
stopPropagationПозволяет остановить всплывание события.
Не принимает аргументов.
Не имеет возвращаемого значения.
isPropagationStoppedПозволяет проверить, было ли остановлено всплывание события.
Не принимает аргументов.
Возвращаемое значение: {Boolean}. В случае, если всплывание события было остановлено – true.
EmitterКласс позволяет инстанцировать объекты, с помощью которых можно генерировать события и осуществлять подписку на них.
modules.require(['events'], function(events) {
var myEmitter = new events.Emitter();
});
onСлужит для подписки на событие определенного типа.
Принимаемые аргументы:
{String} type – тип события, на которое производится подписка. Обязательный аргумент.{Object} data] – дополнительные данные, доступные обработчику как значение поля e.data объекта события.{Function} fn – функция-обработчик, вызываемая для события. Обязательный аргумент.{Object} ctx] – контекст функции-обработчика.Возвращает объект this.
modules.require(['events'], function(events) {
var myEmitter = new events.Emitter();
myEmitter.on('myevent', function() { console.log('foo'); });
myEmitter.emit('myevent'); // 'foo'
});
Кроме того, значением аргумента type могут быть:
modules.require(['events'], function(events) {
var myEmitter = new events.Emitter();
myEmitter.on('myevent1 myevent2', function(e) { console.log(e.type) });
myEmitter.emit('myevent1'); // 'myevent1'
myEmitter.emit('myevent2'); // 'myevent2'
});
{ 'событие-1' : обработчик-1, ... , 'событие-n' : обработчик-n } – чтобы установить сразу несколько обработчиков для разных типов событий;modules.require(['events'], function(events) {
var myEmitter = new events.Emitter();
myEmitter.on({
myevent1 : function(e) { console.log(e.type) },
myevent2 : function(e) { console.log(e.type) }
});
myEmitter.emit('myevent1'); // 'myevent1'
myEmitter.emit('myevent2'); // 'myevent2'
});
Сказанное выше верно и для методов once и un.
onceИдентичен методу on, но выполняется единожды – после первого события подписка удаляется.
Принимаемые аргументы:
{String} type – тип события, на которое производится подписка. Обязательный аргумент.{Object} data] – дополнительные данные, доступные как значение поля e.data объекта события.{Function} fn – функция-обработчик, вызываемая для события. Обязательный аргумент.{Object} ctx] – контекст функции-обработчика.Возвращает объект this.
modules.require(['events'], function(events) {
var myEmitter = new events.Emitter();
myEmitter.on('myevent', function() { console.log('foo') });
myEmitter.emit('myevent'); // 'foo'
myEmitter.emit('myevent'); // обработчик не вызывается
});
unСлужит для удаления установленной ранее подписки на событие определенного типа.
Принимаемые аргументы:
{String} type – тип события, подписка на которое удаляется. Обязательный аргумент.{Function} fn] – удаляемый обработчик.{Object} ctx] – контекст обработчика.Метод возвращает ссылку на объект this.
modules.require(['events'], function(events) {
var myEmitter = new events.Emitter(),
shout = function() { console.log('foo') };
myEmitter.on('myevent', shout);
myEmitter.emit('myevent'); // 'foo'
myEmitter.un('myevent', shout);
myEmitter.emit('myevent'); // обработчик не вызывается
});
emitСлужит для генерации события.
Метод вызывает все функции-обработчики, заданные для события.
Принимаемые аргументы:
{String|events:Event} type – генерируемое событие в виде строки или готового объекта события. Обязательный аргумент.{Object} data] – дополнительные данные, доступные как второй аргумент функции-обработчика.Возвращает объект this.
modules.require(['events'], function(events) {
var myEmitter = new events.Emitter();
myEmitter.on('myevent', function(e, data) { console.log(data) });
myEmitter.emit('myevent', 'ololo'); // 'ololo'
});
Набор и сигнатуры статических методов идентичны набору и сигнатурам методов объекта, инстанцируемого классом.
channels блока eventsЭлемент channels блока events предназначен для работы с именованными каналами событий. Именные каналы позволяют организовать работу с событиями, используя шаблон проектирования «наблюдатель» (также известный как Publisher-subscriber).
Элемент реализует функцию, позволяющую:
id;id.Принимаемые аргументы:
{String} id] – Идентификатор канала. Если не задан будет использоваться канал по умолчанию ('default').{Boolean} drop] – Логический флаг, указывающий (в значении true) на необходимость удалить канал. По умолчанию false.Возвращаемое значение:
{Object}. Объект «класса» Emitter – именной канал.{undefined}. В случае если функция была вызвана с параметром drop в значении true.modules.require(['events__channels'], function(channels) {
var myChannel = channels('my-channel');
myChannel.on('test', function(e, data) { console.log(data.foo) });
myChannel.emit('test', { foo : 'bar' }); // 'bar'
});