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

# Event handling in objects of ObjectManager

<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/object_manager_events/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/8qnln9?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/ObjectManager">ObjectManager</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ObjectCollection">objectManager.ObjectCollection</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.ClusterCollection">objectManager.ClusterCollection</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/objectManager.OverlayCollection">objectManager.OverlayCollection</a>
</div>
<p>
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ObjectManager">ObjectManager</a> - A class for adding a large number of objects to the map
    without needing to create placemarks individually.
</p>
<p>
    The objects added to the ObjectManager are located in the ObjectManager.objects collection. Clusters formed from the
    added placemarks are added to the ObjectManager.clusters collection.
    The visual representation of placemarks is created asynchronously on demand. The visual representation of placemarks and clusters are objects implementing the <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IOverlay">IOverlay</a> interface. In particular, <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/overlay.Placemark">overlay.Placemark</a>.
    Overlays are placed in the ObjectManager.objects.overlays and ObjectManager.clusters.overlays collections, respectively.
</p>
<p>
    Events on object overlays propagate to the parent collections. The unique ID of the object on which the event occurred is passed in the objectID field of the event. IDs for single objects are set by the user, and for clusters they are generated automatically during cluster creation.
</p>

{% list tabs %}

-   index.html

    ```html
    <!DOCTYPE html>
    <html>
        <head>
            <title>Examples. Event handling in ObjectManager</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>
            <div id="map"></div>
        </body>
    </html>
    ```

-   object_manager_events.js

    ```js
    ymaps.ready(init);

    function init() {
        var myMap = new ymaps.Map(
                "map",
                {
                    center: [55.76, 37.64],
                    zoom: 10,
                },
                {
                    searchControlProvider: "yandex#search",
                }
            ),
            objectManager = new ymaps.ObjectManager({
                // Setting an option to make placemarks start clusterizing.
                clusterize: true,
                geoObjectOpenBalloonOnClick: false,
                clusterOpenBalloonOnClick: false,
            });

        myMap.geoObjects.add(objectManager);

        $.ajax({
            url: "data.json",
        }).done(function (data) {
            objectManager.add(data);
        });

        function onObjectEvent(e) {
            var objectId = e.get("objectId");
            if (e.get("type") == "mouseenter") {
                // The setObjectOptions method allows you to set object options "on the fly".
                objectManager.objects.setObjectOptions(objectId, {
                    preset: "islands#yellowIcon",
                });
            } else {
                objectManager.objects.setObjectOptions(objectId, {
                    preset: "islands#blueIcon",
                });
            }
        }

        function onClusterEvent(e) {
            var objectId = e.get("objectId");
            if (e.get("type") == "mouseenter") {
                objectManager.clusters.setClusterOptions(objectId, {
                    preset: "islands#yellowClusterIcons",
                });
            } else {
                objectManager.clusters.setClusterOptions(objectId, {
                    preset: "islands#blueClusterIcons",
                });
            }
        }

        objectManager.objects.events.add(
            ["mouseenter", "mouseleave"],
            onObjectEvent
        );
        objectManager.clusters.events.add(
            ["mouseenter", "mouseleave"],
            onClusterEvent
        );
    }
    ```

{% endlist %}
