08-02.md

注销事件响应

上一节的示例仅仅演示了如何监听一个事件，并响应处理。 但如果之后又不需要再响应该事件了，要怎么办。 比如有一个引导用户使用的需求，用户第一次点击地图的时候，需要弹出一个使用说明，之后点击地图就不用再弹出这个使用说明了。 那我们有哪些方式可以做到这一点呢？ 尝试点击一下下面这个地图，之后再点击一次试试：

<script type="text/javascript" src="../src/ol3.13.1/ol.js" charset="utf-8"></script>

<script type="text/javascript"> var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ center: ol.proj.transform( [104, 30], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) });

var key = map.on('singleclick', function(event){
	alert('大家好，我是淡叔，这是一个演示如何取消事件监听的应用，之后再点击地图时，你将不会再看到这个说明。');
	map.unByKey(key);
})

</script>

第二次点击地图后，是否就不会再弹出提示信息了？ 其实代码很简单：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
	var map = new ol.Map({
		layers: [
		  new ol.layer.Tile({
		    source: new ol.source.OSM()
		  })
		],
		target: 'map',
		view: new ol.View({
		  center: ol.proj.transform(
		      [104, 30], 'EPSG:4326', 'EPSG:3857'),
		  zoom: 10
		})
	});

	var key = map.on('singleclick', function(event){
		alert('大家好，我是淡叔，这是一个演示如何取消事件监听的应用，之后再点击地图时，你将不会再看到这个说明。');
		// 下面这行代码就是取消事件监听
		map.unByKey(key);
	})
</script>

除了上面这个方式可以注销事件监听之外，还可以用下面这样的方式：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
	var map = new ol.Map({
		layers: [
		  new ol.layer.Tile({
		    source: new ol.source.OSM()
		  })
		],
		target: 'map',
		view: new ol.View({
		  center: ol.proj.transform(
		      [104, 30], 'EPSG:4326', 'EPSG:3857'),
		  zoom: 10
		})
	});

	// 创建事件监听器
	var singleclickListener = function(event){
		alert('大家好，我是淡叔，这是一个演示如何取消事件监听的应用，之后再点击地图时，你将不会再看到这个说明。');
		// 在响应一次后，注销掉该监听器
		map.un('singleclick', singleclickListener);
	};
	map.on('singleclick', singleclickListener);
</script>

针对这个应用，还可以按照下面这样来实现：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
	var map = new ol.Map({
		layers: [
		  new ol.layer.Tile({
		    source: new ol.source.OSM()
		  })
		],
		target: 'map',
		view: new ol.View({
		  center: ol.proj.transform(
		      [104, 30], 'EPSG:4326', 'EPSG:3857'),
		  zoom: 10
		})
	});

	// 使用once函数，只会响应一次事件，之后自动注销事件监听
	map.once('singleclick', function(event){
		alert('大家好，我是淡叔，这是一个演示如何取消事件监听的应用，之后再点击地图时，你将不会再看到这个说明。');
	})
</script>

到此，OpenLayers 3的事件应用基本介绍完毕，后续将介绍OpenLayers 3常用事件。