注销事件响应

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

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

<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常用事件。