Documentation
Reference
2.1.50 (current version)
collection
interactivityModel
Interfaces

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 occured 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

domEvent.manager()

Examples:

1.

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

2.

// Using the events container.
var block = document.getElementById('block'),
    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.
    someClass = function () {
        this.property = 'value';
    },
    // Creating a class implementation.
    someObj = new someClass();
ymaps.domEvent.manager.add(block, 'click', function (event) {
    console.log(this.property + ' ' + event.get('type')); // value click
}, 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

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

domEvent.manager

Adds a listener for the object's DOM events.

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

event.Group

Returns group of event listeners for the specified DOM element.

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

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:

ParameterDefault valueDescription
htmlElement*
[no-highlight[

* Mandatory parameter/option.

]no-highlight]

Type: HTMLElement|Document

The DOM element whose events need to be listened for.

types*
[no-highlight[

* Mandatory parameter/option.

]no-highlight]

Type: String[][]|String[]

Event type or types.

callback*
[no-highlight[

* Mandatory parameter/option.

]no-highlight]

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:

ParameterDefault valueDescription
htmlElement*
[no-highlight[

* Mandatory parameter/option.

]no-highlight]

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:

ParameterDefault valueDescription
htmlElement*
[no-highlight[

* Mandatory parameter/option.

]no-highlight]

Type: HTMLElement|Document

The DOM element whose events are listened for.

types*
[no-highlight[

* Mandatory parameter/option.

]no-highlight]

Type: String[][]|String[]

Event type or types.

callback*
[no-highlight[

* Mandatory parameter/option.

]no-highlight]

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.