domEvent.manager
Статический объект.
Предоставляет единый интерфейс для работы с событиями DOM-элементов во всех браузерах и на всех устройствах. Для устройств, которые не поддерживают мышь, события будут транслироваться.
- Событие начала касания (touchstart/pointerdown) с одной точкой прикосновения транслируется в последовательность событий mouseenter, mousemove и mousedown;
- Событие перемещения касания (touchmove/pointermove) с одной точкой прикосновения транслируется в событие mousemove;
- События завершения касания (touchend/pointerup) или отмены (touchcancel/pointercancel) транслируются в последовательность событий 'mouseup', 'mousemove' и 'mouseleave', если ранее произошло событие начала касания с одной точкой прикосновения;
- Быстрое поступление событий начала и завершения с одной точкой прикосновения без перемещения транслируется в событие click;
- Быстрое поступление двух событий click транслируется в событие dblclick;
- Если между событиями начала и завершения с одной точкой прикосновения без перемещения была продолжительная задержка, то это транслируется в событие contextmenu.
Также поддерживаются специальные события для обработки нескольких одновременных касаний. - multitouchstart отправляется при поступлении события начала касания с двумя и более точками прикосновений;
- multitouchmove отправляется при поступлении события перемещения касания с двумя и более точками прикосновений;
- multitouchend отправляется при поступлении события завершения касания, если ранее было отправлено событие multitouchstart;
- При добавлении/удалении точки прикосновения будет отправлено событие multitouchend и событие multitouchstart, если оставшееся количество точек больше или равно двум.
Менеджер работы с событиями DOM-элементов.
Примеры:
1.
// Прослушивание событий одного элемента DOM.
var block = document.getElementById('block');
ymaps.domEvent.manager
.add(block, 'click', function (event) {
// событие 'click'.
console.log(event.get('type'));
})
.add(block, 'mouseleave', function (event) {
// событие 'mouseleave'.
console.log(event.get('type'));
})
// Установка одного листенера для нескольких событий.
.add(block, ['mousedown', 'mouseup'], function (event) {
// события 'mousedown' / 'mouseup'.
console.log(event.get('type'));
});
2.
// Использование контейнера событий.
var block = document.getElementById('block'),
domEventsGroup = ymaps.domEvent.manager.group(block);
domEventsGroup.add('click', function (event) {
console.log(event.get('type')); // click
// Удаляем все прослушивания событий.
domEventsGroup.removeAll();
});
3.
// Выполняем listener в контексте конкретного объекта.
var block = document.getElementById('block');
// Задаем класс.
var someClass = function () {
this.property = 'value';
};
// Создаем класс.
var someObj = new someClass();
ymaps.domEvent.manager.add(block, 'click', function (event) {
// Выводит 'click'.
console.log(this.property + ' ' + event.get('type'));
}, someObj);
4.
// На устройствах, которые поддерживают сенсорный ввод, можно прослушивать специальные события multitouch*
var block = document.getElementById('block');
ymaps.domEvent.manager
.add(block, ['multitouchstart', 'multitouchmove', 'multitouchend'], function (event) {
console.log(event.get('type')); // multitouchstart / multitouchmove / multitouchend
// Запрещаем сдвиг и масштабирование страницы пальцами.
event.callMethod('preventDefault');
});
Методы
Имя |
Статический |
Возвращает |
Описание |
domEvent.manager.add(htmlElement, types, callback[, context[, capture]]) |
Добавляет слушателя DOM-событий объекта. |
||
domEvent.manager.group(htmlElement[, capture]) |
Возвращает группу слушателей событий для заданного DOM-элемента. |
||
domEvent.manager.remove(htmlElement, types, callback[, context[, capture]]) |
Удаляет слушателя DOM-событий объекта. |
Описание методов
add
{domEvent.manager} _<static>_ domEvent.manager.add(htmlElement, types, callback[, context[, capture]])
Добавляет слушателя DOM-событий объекта.
Возвращает ссылку на себя.
Параметры:
Параметр |
Значение по умолчанию |
Описание |
— |
Тип: HTMLElement|Document DOM-элемент, события которого необходимо прослушивать. |
|
— |
Тип: String|String[] Тип или типы событий. |
|
— |
Тип: Function Функция-обработчик события. |
|
— |
Тип: Object Контекст выполнения функции-обработчика. |
|
— |
Тип: Boolean Признак того, что событие необходимо отслеживать на фазе захвата. |
* Обязательный параметр/опция.
group
{event.Group} _<static>_ domEvent.manager.group(htmlElement[, capture])
Возвращает группу слушателей событий для заданного DOM-элемента.
Параметры:
Параметр |
Значение по умолчанию |
Описание |
— |
Тип: HTMLElement|Document DOM-элемент. |
|
— |
Тип: Boolean Признак того, что событие необходимо отслеживать на фазе захвата. |
* Обязательный параметр/опция.
remove
{domEvent.manager} _<static>_ domEvent.manager.remove(htmlElement, types, callback[, context[, capture]])
Удаляет слушателя DOM-событий объекта.
Возвращает ссылку на себя.
Параметры:
Параметр |
Значение по умолчанию |
Описание |
|
— |
Тип: HTMLElement|Document DOM-элемент, события которого прослушиваются. |
||
— |
Тип: String|String[] Тип или типы событий. |
||
— |
Тип: Function |
String Функция-обработчик события либо уникальный id пары callback-context. |
|
— |
Тип: Object Контекст выполнения функции-обработчика. |
||
— |
Тип: Boolean Признак того, что событие необходимо отслеживать на фазе захвата. |
* Обязательный параметр/опция.
Обязательный параметр.