一个JavaScript的例子
今天研究了一个使用Google maps的例子，写一下学到的知识（还不到心得的程度）。
首先声明，我对JavaScript并不熟，所以例子浅显看到的人请别嘲笑我。我会慢慢的一个个例子的发，一点点的学习。
<script type="text/javascript"> //<![CDATA[ //声明GMap对象 var map; var eventinfo; var mapcenter; var zoomlevel; var maptype; //更新信息，el为指定HTML元素，info为里边显示的内容 function updateInfo(el, info) { el.innerHTML = info; } //添加拖动事件监听器 function addDragListener() { //监听地图上的事件 GEvent.addDomListener(map, 'dragstart', function() { updateInfo(eventinfo, "当前事件：dragstart"); }); GEvent.addDomListener(map, 'drag', function() { updateInfo(eventinfo, "当前事件：drag"); updateInfo(mapcenter, "当前地图中心纬度：" + map.getCenter().lat() + " 经度" + map.getCenter().lng()); }); GEvent.addDomListener(map, 'dragend', function() { updateInfo(eventinfo, "当前事件：dragend"); }); } //添加缩放事件监听器 function addZoomListener() { //监听地图上的缩放事件 GEvent.addDomListener(map, 'zoomstart', function() { updateInfo(eventinfo, "当前事件：zoomstart"); }); GEvent.addDomListener(map, 'zoomend', function() { updateInfo(eventinfo, "当前事件：zoomend"); updateInfo(zoomlevel, "当前地图缩放级别：" + map.getZoom()); }); } //添加maptypechanged事件监听器 function addMapTypeListener() { //监听地图上maptypechanged事件 GEvent.addDomListener(map, 'maptypechanged', function() { updateInfo(eventinfo, "当前事件：maptypechanged"); updateInfo(maptype, "当前地图类型：" + map.getCurrentMapType().getName(false)); }); } function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(39.92, 116.46), 4); map.addControl( new GMapTypeControl() ); map.addControl( new GLargeMapControl() ); eventinfo = document.getElementById("eventinfo"); mapcenter = document.getElementById("mapcenter"); zoomlevel = document.getElementById("zoomlevel"); maptype = document.getElementById("maptype"); addDragListener(); addZoomListener(); addMapTypeListener(); } } //]]> </script> </head> <!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄露--> <body onload="load()" onunload="GUnload()"> <!--以下id为map的DIV元素即为Google地图的容器--> <div id="map" style="width: 500px; height: 400px;"></div> <div id="eventinfo"></div> <div id="mapcenter"></div> <div id="zoomlevel"></div> <div id="maptype"></div> </body>
这个例子的运作流程：首先文档被加载到浏览器，加载时触发load()事件，在该事件里面会将通过三个添加监听器的函数为map对象添加三种类型的监听器：地图拖动、地图放大和缩小、地图类型改变，每种类型事件发生时都会有相应的函数进行处理。
通过这个例子就可以对事件处理的流程有了大体的了解了。