DOM Events

The NAVER Maps API v3 offers methods to receive and respond to document object model (DOM) events as well as UI events.

Using these methods, you do not need to handle different DOM event models for each browser.

naver.maps.Event.addDOMListener( element:HTMLElement, eventName:String, listener:Function )
naver.maps.Event.removeDOMListener( listener:DOMEventListener | listeners:DOMEventListener[] | element:HTMLElement, eventName:String, listener:Function )

Add an event listener

Add an event listener to receive a DOM event. Using the addDOMListener method, you can add a listener that runs the handler after receiving a DOM event.

After adding a listener, you can receive a DOMEventListener object as shown below.

DOMEventListener = {
    eventName: String,
    listener: Function,
    target: HTMLElement
}

The DOMEventListener object contains information of the added listener, and is used to remove the listener.

Remove an event listener

If an event listener is removed, DOM events are no longer received. You can remove a listener with the removeDOMListener method.
And when you call the method, you can pass a DOMEventListener object (or object array) as an argument.

The following code example moves the map to the position of a marker and changes the zoom level when the map is clicked.

var mapOptions = {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
};

var map = new naver.maps.Map('map', mapOptions);

var markerOptions = {
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom'
};

var marker = new naver.maps.Marker(markerOptions);

var mapElement = map.getElement();

var listener = naver.maps.Event.addDOMListener(mapElement, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());

    naver.maps.Event.removeDOMListener(listener);
});