---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/dom_event_manager.md
  - https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/dom_event_manager.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt

# Subscribing to the DOM element events

<iframe id="LIVE-EXAMPLE" style="width:100%;height: 400px;border-radius: 8px;border: 1px solid rgba(92, 94, 102, 0.14);" frameBorder="0" src="https://yastatic.net/s3/front-maps-static/maps-front-jsapi-v2-1/examples/2/out/s3-cases/en/dom_event_manager/index.html" allow="fullscreen"></iframe>

<a target="_blank" rel="noopener noreferrer" style="display: inline-block;margin-top: 10px;cursor: pointer;border-radius: 4px;padding: 9px 12px;background: #151515;color: white;text-decoration: none;font-weight: 500" href="https://codesandbox.io/p/sandbox/56s8f2?file=index.html">Open in CodeSandbox</a>

<div id="references">
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ready">ready</a>, <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Map">Map</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager">domEvent.manager</a>
</div>
<p>
    Dom elements can generate different types of events, depending on the browser and device.
    For example, hovering the mouse over an object can generate the 'mousedown' event, and touching an item on a tablet screen can generate the 'touchstart' event.
   The Yandex.Maps API converts various browser events to a single list of events.
   This means you can write the same code for handling dom events in all browsers and on all devices that are supported by the API.
</p>
<p>
    For a list of API events and how events are converted, see the description of the <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IDomEventEmitter">IDomEventEmitter</a> interface.
    To subscribe to events of dom elements, use <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/domEvent.manager">domEvent.manager</a>.
</p>

{% list tabs %}

-   index.html

    ```html
    <!DOCTYPE html>

    <html>
        <head>
            <title>Examples. Forward geocoding</title>
            <meta
                http-equiv="Content-Type"
                content="text/html; charset=UTF-8"
            />
            <!--
            Set your own API-key. Testing key is not valid for other web-sites and services.
            Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
        -->
            
            
            
        </head>
        <body>
            <h3>Pet the cat!</h3>
            <div id="myElement">🐈</div>
            <button id="clear">Clear</button>
            <div id="log"></div>
        </body>
    </html>
    ```

-   dom_event_manager.js

    ```js
    ymaps.ready(init);

    function init() {
        /**
         * Even if the user touches the element on a tablet screen, events such as
         * 'touchstart', 'touchmove' and others will be converted into a single list of events.
         * This allows you to write cross-platform code and not to think about the type of device.
         */
        var targetElement = document.getElementById("myElement"),
            events = ["mouseenter", "mouseleave", "click", "dblclick", "wheel"],
            divListeners = ymaps.domEvent.manager
                .group(targetElement)
                .add(events, function (event) {
                    log(event.get("type"));
                });

        document.getElementById("clear").onclick = function () {
            document.getElementById("log").innerHTML = "";
        };

        window.log = function (message) {
            document.getElementById("log").innerHTML =
                document.getElementById("log").innerHTML + "<br>" + message;
        };
    }
    ```

{% endlist %}
