DOM 이벤트 수신하기
Google Maps Javascript API 이벤트 모델은 자체 맞춤 이벤트를 만들고 관리합니다. 그런데 브라우저의 DOM(Document Object Model)도 사용 중인 특정 브라우저 이벤트 모델에 따라 자체 이벤트를 만들고 전달합니다. 이 이벤트를 캡쳐하고 응답하려는 경우 Maps API는 addDomListener() 정적 메소드를 제공하여 DOM 이벤트를 수신하고 바인딩합니다.
이 편리한 메소드에는 아래에 표시된 것처럼 서명이 있습니다.
addDomListener(instance:Object, eventName:string, handler:Function)
여기에서 instance는 다음을 비롯하여 브라우저에서 지원하는 DOM 요소일 수 있습니다.
- DOM의 계층적 멤버(예:
window또는document.body.myform) - 이름이 지정된 요소(예:
document.getElementById("foo"))
addDomListener()는 지정된 이벤트를 브라우저에 전달하기만 하며, 이렇게 하면 브라우저가 브라우저의 DOM 이벤트 모델에 따라 처리합니다. 거의 모든 최신 브라우저는 최소한 DOM Level 2를 지원합니다. DOM Level 이벤트에 대한 자세한 내용은 Mozilla DOM Levels 참조 문서를 참조하세요.
지금까지 이 글을 살펴보셨다면 이미 한 개의 DOM 이벤트(<body> 태그 내에서 처리한 window.onload 이벤트)를 잘 아실 것입니다. 아래에 표시된 대로 HTML 페이지가 완전히 로드되면 이 이벤트를 사용하여 초기 자바스크립트 코드를 트리거합니다.
<script>
function initialize() {
// Map initialization
}
</script>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
여기에서는 이 이벤트가 <body> 요소에 연결되어 있지만 실제로는 window 요소 아래의 DOM 계층이 완전히 구축되고 렌더링되었음을 나타내는 window 이벤트입니다.
잘 아시겠지만 <body> 태그에 onload 이벤트를 사용하면 콘텐츠와 동작이 혼합됩니다. 일반적으로 콘텐츠 코드(HTML)는 동작 코드(자바스크립트)와 분리하는 것이 좋으며, 프리젠테이션 코드(CSS)도 별도로 제공하는 것이 좋습니다. 이 작업은 다음과 같이 인라인onload 이벤트 핸들러를 Maps API 자바스크립트 코드 내에서 DOM 리스너로 대체하여 수행할 수 있습니다.
<script>
function initialize() {
// Map initialization
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map_canvas"></div>
</body>
위의 코드는 Maps Javascript API 코드이지만 addDomListener() 메소드는 브라우저의 window 객체에 바인딩되어 있으며 API가 API의 일반 도메인 외부에 있는 객체와 통신할 수 있도록 합니다.
'Backup' 카테고리의 다른 글
| 구글맵 - 컨트롤 옵션 (0) | 2012.04.18 |
|---|---|
| 구글맵 - 지도에 컨트롤 추가 & 삭제 (0) | 2012.04.18 |
| 구글맵 이벤트 - 속성 가져오기 (예제-줌속성) (0) | 2012.04.18 |
| 구글맵 이벤트 - 클릭하면 메세지창출력 (0) | 2012.04.18 |
| 구글맵 이벤트 - 클릭한곳 마커찍기 (0) | 2012.04.18 |