domEvent.manager

Static object.

Provides a singular interface for working with DOM element events in all browsers and on all devices. For devices that do not have mouse support, events will be mapped to mouse events.

  • The touch start event (touchstart/pointerdown) with a single touch point is interpeted as a sequence of "mouseenter", "mousemove" and "mousedown" events.
  • The moving touch event (touchmove/pointermove) with a single touch point is mapped to the "mousemove" event.
  • Events for ending touch (touchend/pointerup) or canceling touch (touchcancel/pointercancel) are mapped to a sequence of "mouseup", "mousemove", and "mouseleave" events, if a touch start event with a single touch point already occurred earlier.
  • A quick succession of start and end events with a single touch point without movement is mapped to a "click" event.
  • A quick succession of two "click" events is mapped to a "dblclick" event.
  • If there was a lengthy pause between the start and end events with a single touch point and without movement, this is mapped to the "contextmenu" event.
    Special events for handling multiple simultaneous touches are also supported.
  • "multitouchstart" is sent when touch start events are received with two or more touch points.
  • "multitouchmove" is sent when moving touch events are received with two or more touch points.
  • "multitouchend" is sent when touch end events are received, if the "multitouchstart" event was sent earlier.
  • When adding/removing a touch point, the "multitouchend" event and the "multitouchstart" event will be sent if the remaining number of points is greater than or equal to two.

Manager for working with DOM element events.

Methods

Examples:

1.

// Listening for events of a single DOM element.
var block = document.getElementById('block');
ymaps.domEvent.manager
    .add(block, 'click', function (event) {
        // 'click' event.
        console.log(event.get('type'));
    })
    .add(block, 'mouseleave', function (event) {
        // 'mouseleave' event.
        console.log(event.get('type'));
    })
    // Setting a single listener for multiple events.
    .add(block, ['mousedown', 'mouseup'], function (event) {
        // 'mousedown' / 'mouseup' events.
        console.log(event.get('type'));
    });

2.

// Using the events container.
var block = document.getElementById('block');
var domEventsGroup = ymaps.domEvent.manager.group(block);
domEventsGroup.add('click', function (event) {
    console.log(event.get('type')); // click
    // Deleting all event listeners.
    domEventsGroup.removeAll();
});

3.

// Executing the listener in the context of a specific object.
var block = document.getElementById('block');
// Defining the class.
var someClass = function () {
    this.property = 'value';
};
// Creating a class implementation.
var someObj = new someClass();
ymaps.domEvent.manager.add(block, 'click', function (event) {
    // Outputs value 'click'.
    console.log(this.property + ' ' + event.get('type'));
}, someObj);

4.

// On devices with touch support, we can listen to special multitouch* events
var block = document.getElementById('block');
ymaps.domEvent.manager
    .add(block, ['multitouchstart', 'multitouchmove', 'multitouchend'], function (event) {
        console.log(event.get('type')); // multitouchstart / multitouchmove / multitouchend
        // Not allowing users to move and scale the page using touch.
        event.callMethod('preventDefault');
    });

Methods

Name

Returns

Description

domEvent.manager.add(htmlElement, types, callback[, context[, capture]])

Static:

domEvent.manager

Adds a listener for the object's DOM events.

domEvent.manager.group(htmlElement[, capture])

Static:

event.Group

Returns group of event listeners for the specified DOM element.

domEvent.manager.remove(htmlElement, types, callback[, context[, capture]])

Static:

domEvent.manager

Deletes the listener for the objects's DOM events.

Methods details

add

{domEvent.manager}  _<static>_ domEvent.manager.add(htmlElement, types, callback[, context[, capture]])

Adds a listener for the object's DOM events.

Returns self-reference.

Parameters:

Parameter

Default value

Description

htmlElement*

—

Type: HTMLElement|Document

The DOM element whose events need to be listened for.

types*

—

Type: String|String[]

Event type or types.

callback*

—

Type: Function

Handler function for the event.

context

—

Type: Object

Context for the handler function.

capture

—

Type: Boolean

Indicates if the event should be monitored at the capture phase.

* Mandatory parameter/option.

group

{event.Group}  _<static>_ domEvent.manager.group(htmlElement[, capture])

Returns group of event listeners for the specified DOM element.

Parameters:

Parameter

Default value

Description

htmlElement*

—

Type: HTMLElement|Document

DOM element.

capture

—

Type: Boolean

Indicates if the event should be monitored at the capture phase.

* Mandatory parameter/option.

remove

{domEvent.manager}  _<static>_ domEvent.manager.remove(htmlElement, types, callback[, context[, capture]])

Deletes the listener for the objects's DOM events.

Returns self-reference.

Parameters:

Parameter

Default value

Description

htmlElement*

—

Type: HTMLElement|Document

The DOM element whose events are listened for.

types*

—

Type: String|String[]

Event type or types.

callback*

—

Type: Function|String

Handler function for the event, or the unique id of the callback-context pair.

context

—

Type: Object

Context for the handler function.

capture

—

Type: Boolean

Indicates if the event should be monitored at the capture phase.

* Mandatory parameter/option.