DOM 이벤트

NAVER 지도 API v3은 지도 UI 이벤트 외에 사용자가 DOM(Document Object Model) 이벤트를 수신하고 응답할 수 있도록 메서드를 제공합니다.

이 메서드를 이용하면 사용자는 브라우저마다 다른 DOM 이벤트 모델을 별도로 처리할 필요가 없습니다.

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

이벤트 리스너 등록하기

이벤트 리스너를 등록하면 DOM 이벤트를 수신할 수 있습니다. addDOMListener 메서드를 이용해 특정 DOM에서 발생한 이벤트를 받아 핸들러를 실행하는 리스너를 등록합니다.

리스너를 등록하면 다음과 같이 DOMEventListener 객체를 받습니다.

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

DOMEventListener 객체는 등록된 리스너의 정보를 담고 있는 객체로 등록된 리스너를 제거할 때 이용합니다.

이벤트 리스너 제거하기

이벤트 리스너를 등록 해제하면 더 이상 DOM 이벤트를 수신하지 않습니다. removeDOMListener 메서드를 이용해 등록한 리스너를 제거합니다.
이때, 인수로 DOMEventListener 객체(또는 객체 배열)를 전달할 수 있습니다.

다음 예제는 지도를 클릭했을 때, 마커가 있는 위치로 이동하며 줌 레벨을 변경하는 예제입니다.

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);
});