前端地图应用中几种监听事件

2,070 8
事件监听
  1. 事件监听
  2. 地图开发中的事件监听
  3. 事件监听的使用
    1. 原生事件监听
    2. 百度事件监听
    3. 高德事件监听
    4. 谷歌事件监听
    5. ArcGIS中的事件监听
  4. 事件监听总结

轻松绑定解除事件监听：
在前端使用JavaScript给一个元素绑定、解除监听事件最为常用的是addEventListener，解除也很容易。在前端地图开发中，也会遇到很多事件绑定、解除的问题，下面我们就来讨论一下在这些环境下的事件监听是怎么实现的。

从事GIS方向，和地图打交道比较多，对于各种地图的监听事件的使用比较多，对于常用的事件监听方法梳理了以下内容，作为笔记保存。

事件监听

JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。

地图开发中的事件监听

  • 百度
  • 高德
  • 谷歌
  • ArcGIS

事件监听的使用

原生事件监听

在Web项目中要对dom元素绑定监听事件，有onclick，原生方法一般使用attachEvent和addEventListener。其中attachEvent使用与IE早期版本，比如IE6、7、8，而addEventListener适用于IE9、10、11，还有FireFox、Chrome、Safari和Opera等现代浏览器。

  1. 直接添加

    a. html方式

    1
    2
    <!-- 最简单的是在dom上添加 onclick 属性 -->
    <input type="button" value="clickMe" onclick="check(this)">

    b. javascript方式

    1
    2
    3
    4
    // 给元素添加 onclick 事件 ： onclick还可以是 ondblclick、ondrag等
    element.onclick = function(){
        // logic
    }

  2. attachEvent

    在早期IE中，使用attachEvent作为添加监听的一种方式，对一个元素绑定监听可以按照以下方式进行：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /**
    * 绑定监听
    * element 需要添加事件监听的元素或dom
    * event 事件类型（事件名称），是字符类型，比如包含"onclick"、"onmouseover"、"onkeyup"等
    * callback 触发监听的回调函数
    */ 
    element.attachEvent(event, callback)；

    /**
    * 移除监听
    * element 需要移除事件监听的元素或dom
    * event 事件类型（事件名称），是字符类型，比如包含"onclick"、"onmouseover"、"onkeyup"等
    * callback 触发监听的回调函数
    */ 
    element.attachEvent(event, callback)；

    /**
    * callback 是回调函数名，可以自定义
    * e 是回调参数
    */
    function callback(e){
        // logic
    }

  3. addEventListener

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* 绑定监听
* element 需要添加事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"click"、"mouseover"、"keyup"等
* callback 触发监听的回调函数
*/ 
element.addEventListener(event, callback)；

/**
* 移除监听
* element 需要移除事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"click"、"mouseover"、"keyup"等
* callback 触发监听的回调函数
*/ 
element.removeEventListener(event, callback)；

/**
* callback 是回调函数名，可以自定义
* e 是回调参数
*/
function callback(e){
    // logic
}
  1. 小结

从以上两个方法我们可以看出其中存在着一些差别：

  1. 兼容性方面，attachEvent仅支持早期的IE版本，而addEventListener支持的较为广泛；
  2. attachEvent在事件类型上，比addEventListener多一个字符”on”，需要额外注意；
  3. 两者绑定监听都需要实名函数，匿名函数的绑定关系是无法移除的。

百度事件监听

在百度地图中对dom元素的监听，官方给出的是addEventListener和removeEventListener，使用方法和原生的addEventListener类似，但是地图API事件监听是独立的，与原生的dom事件不同，而且还增加很多自定义的事件类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* 绑定监听
* element 需要添加事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"click"、"mouseover"、"dragstart"等
* callback 触发监听的回调函数
*/ 
element.addEventListener(event, callback)；

/**
* 移除监听
* element 需要移除事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"click"、"mouseover"、"dragstart"等
* callback 触发监听的回调函数
*/ 
element.removeEventListener(event, callback)；

/**
* callback 是回调函数名，可以自定义
* e 是回调参数
*/
function callback(e){
    // logic
}

需要注意的是，如果要能解绑事件，绑定监听时就需要使用实名函数，匿名函数是无法解绑的。

高德事件监听

高德在事件监听上提供了众多的方法，使用最多的就是on/off组合，另外还有addDomListener、addListener、addListenerOnce、removeListener和trigger，此次主要介绍一下最为常用的使用方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* 绑定监听
* element 需要添加事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"click"、"mouseover"、"dragstart"等
* callback 触发监听的回调函数
*/ 
element.on(event, callback)；

/**
* 移除监听
* element 需要移除事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"click"、"mouseover"、"dragstart"等
* callback 触发监听的回调函数
*/ 
element.off(event, callback)；

/**
* callback 是回调函数名，可以自定义
* e 是回调参数
*/
function callback(e){
    // logic
}

同样的，在 绑定和解绑时都应该使用实名函数，除非之后不需要解绑。

谷歌事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 绑定监听
* element 需要添加事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"click"、"mouseover"、"dragstart"等
* callback 触发监听的回调函数
*/ 
var evt = google.maps.event.addListener(event, callback)；

/**
* 移除监听
* element 需要移除事件监听的元素或dom
* evt 绑定监听时的句柄
*/ 
google.maps.event.removeListener(evt)；

/**
* callback 是回调函数名，可以自定义
* e 是回调参数
*/
function callback(e){
    // logic
}

到谷歌这里，绑定监听就不如百度和高德那样，而是通过绑定监听返回的句柄进行解绑操作。这样的话，在绑定监听时的回调函数就可以是匿名函数，也可以是实名函数了。所以说上帝为你关闭的一扇大门，肯定会给你打开一扇窗户，不会让你为难的。

ArcGIS中的事件监听

ArcGIS的事件监听有两种方式，一种是很早之前的版本connect style，一种是on style。其中connect是通过dojo进行实现，不过现在更加推荐on来实现。

  1. connect style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* 绑定监听
* element 需要添加事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"onClick"、"onMouseOver"等
* callback 触发监听的回调函数
*/ 
var evt = dojo.connect(element, event, callback)；

/**
* 移除监听
* evt 绑定监听时的句柄
*/ 
dojo.disconnect(evt)；

/**
* callback 是回调函数名，可以自定义
* e 是回调参数
*/
function callback(e){
    // logic
}
  1. on style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 绑定监听
* element 需要添加事件监听的元素或dom
* event 事件类型（事件名称），是字符类型，比如包含"click"、"mouse-over"等
* function 触发监听的回调函数
*/ 
var evt = element.on(event, callback)；

/**
* 移除监听
* element 需要移除事件监听的元素或dom
* evt 绑定监听时的句柄
*/ 
evt.remove()；

/**
* callback 是回调函数名，可以自定义
* e 是回调参数
*/
function callback(e){
    // logic
}

其中connect style和on style对于event格式不一样，除了方法名不一样外，在调用方面也存在一定的不同，需要额外注意，不要混淆。

事件监听总结

从上到下看过来，就会发现事件监听也是大同小异，调用方式、事件名称都是次要，关键是考虑好事件绑定后要不要解除，一般来讲都需要绑定实名函数（也有例外，比如谷歌和ArcGIS），方便解除监听事件。

从事开发行业，特别是GIS行业，几乎在所有的项目中都会使用事件监听（主要指地图事件监听），所以希望小伙伴都能扎实的掌握好该技能。

能力有限，如有错误或疑问请在评论区指出，谢谢。


关注公众号

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器