Блок предоставляет набор JS-классов, реализующий механизмы работы с событиями.
| Класс | Конструктор | Описание |
|---|---|---|
| Event | Event(type {String}, target {Object}) |
Служит для создания объекта события, изменения и проверки его состояний. |
| Emitter | - | Служит для генерации событий и подписки на них. |
| Класс | Имя | Тип или возвращаемое значение | Описание |
|---|---|---|---|
| Event | type | String |
Тип события. |
| result | * |
Результат, возвращенный последним обработчиком события. | |
| target | Object |
Объект на котором возникло событие. | |
| data | * |
Данные, передаваемые как аргумент обработчику. | |
| preventDefault() | - | Позволяет предотвратить выполнение стандартного действия предусмотренного для события. | |
| isDefaultPrevented() | Boolean |
Проверяет, было ли предотвращено выполнение стандартного действия, предусмотренного для события. | |
| stopPropagation() | - | Позволяет остановить всплывание события. | |
| isPropagationStopped() | Boolean |
Проверяет, было ли остановлено всплывание события. | |
| Emitter | on(type {String}, [data {Object}], fn {Function}, [ {Object} ctx]) |
- | Служит для подписки на событие определенного типа. |
once(type {String}, [data {Object}], fn {Function}, [ctx {Object}]) |
- | Служит для подписки на событие определенного типа. Обработчик выполняется единожды. | |
un(type {String}, fn {Function}, [ctx {Object}]) |
- | Служит для удаления подписки на событие определенного типа. | |
emit(type {String|events:Event}, [data {Object}]) |
- | Служит для генерации события. |
| Элемент | Способы использования | Описание |
|---|---|---|
| channels | JS |
Предназначен для работы с именованными каналами событий. |
| Элемент | Функция | Тип возвращаемого значения | Описание |
|---|---|---|---|
| channels | channels([id {String}], [drop {Boolean}]) |
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Служит для подписки на событие определенного типа.
Принимаемые аргументы:
type {String} – тип события, на которое производится подписка. Обязательный аргумент.data {Object}] – дополнительные данные, доступные обработчику как значение поля e.data объекта события.fn {Function} – функция-обработчик, вызываемая для события. Обязательный аргумент.ctx {Object}] – контекст функции-обработчика.Возвращает объект 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, но выполняется единожды – после первого события подписка удаляется.
Принимаемые аргументы:
type {String} – тип события, на которое производится подписка. Обязательный аргумент.data {Object}] – дополнительные данные, доступные как значение поля e.data объекта события.fn {Function} – функция-обработчик, вызываемая для события. Обязательный аргумент.ctx {Object}] – контекст функции-обработчика.Возвращает объект 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Служит для удаления установленной ранее подписки на событие определенного типа.
Принимаемые аргументы:
type {String} – тип события, подписка на которое удаляется. Обязательный аргумент.fn {Function}] – удаляемый обработчик.ctx {Object}] – контекст обработчика.Метод возвращает ссылку на объект 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Служит для генерации события.
Метод вызывает все функции-обработчики, заданные для события.
Принимаемые аргументы:
type {String|events:Event} – генерируемое событие в виде строки или готового объекта события. Обязательный аргумент.data {Object}] – дополнительные данные, доступные как второй аргумент функции-обработчика.Возвращает объект 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.Принимаемые аргументы:
id {String}] – Идентификатор канала. Если не задан будет использоваться канал по умолчанию ('default').drop {Boolean}] – Логический флаг, указывающий (в значении 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'
});