在 Web 开发中，我们还会遇到对 DOM 事件的操作，或者特殊场景下需要使用自定义事件，因此本章将会介绍这两种事件的使用。

1. DOM 事件

我们在 JS API 中提供了对 DOM 事件的操作，在不使用第三方类库的情况下，您依然可以处理不同浏览器的兼容问题。当然开发者也可以使用类似 jQuery 这样的类库进行替换。

有别于前面的事件接口，DOM 的事件绑定使用 AMap.event.addDomListener方法进行绑定。而解绑使用 AMap.event.removeListener 方法。

使用方式和很多第三方类库大同小异，这里仅给出一个简单的例子：HTML

<!-- DOM 节点 - 按钮 -->
<button id="btn">Click Me!</button>

JavaScript

var btn = document.getElementById("btn")
// 绑定事件
var listener = AMap.event.addDomListener(btn, "click", function(ev) {
  // DOM 被点击时触发，ev 为原生事件
}); 
// 解绑事件
AMap.event.removeListener(listener);

事件最后更新时间: 2021年01月22日

事件有两种使用方式

第一种，针对Map、覆盖物等常用类，我们推荐直接使用这些类的对象的on、off成员方法来实现事件的简单绑定和移除，具有使用方便、代码简洁的特点

方法	返回值	说明
`on( eventName, handler, context)`		注册事件，给Map或者覆盖物对象注册事件 eventName：事件名称（必填）， handler：事件回调函数（必填）， context：事件回调中的上下文（可选，缺省时，handler中this为调用on方法的对象本身，否则this指向context引用的对象）注意：多次绑定时，当eventName、handler函数对象、context对象有任意一个不一样就会再次绑定。
`off( eventName, handler, context)`		移除事件绑定 eventName：事件名称（必填）， handler：事件功能函数（必填）， context：事件上下文（可选，缺省时为调用off方法的对象本身，否则为context引用的对象）注意：只有当off与on的eventName、handler函数对象、context对象完全一致时才能有效移除监听。

第二种,使用AMap.event命名空间

方法	返回值	说明
`addDomListener( instance, eventName, handler, context)`	`EventListener`	注册DOM对象事件：给DOM对象注册事件，并返回eventListener。运行AMap.event.removeListener(eventListener)可以删除该事件的监听器。参数： instance：需注册事件的DOM对象（必填）， eventName：事件名称（必填）， handler：事件功能函数（必填）， context：事件上下文（可选，缺省时，handler中this指向参数instance引用的对象，否则this指向context引用的对象）
`addListener( instance, eventName, handler, context)`	`EventListener`	注册对象事件：给对象注册事件，并返回eventListener。运行AMap.event.removeListener(eventListener)可以删除该事件的监听器。参数： instance：需注册事件的对象（必填）， eventName：事件名称（必填）， handler：事件功能函数（必填）， context：事件上下文（可选，缺省时，handler中this指向参数instance引用的对象，否则this指向context引用的对象）
`addListenerOnce( instance, eventName, handler, context)`	`EventListener`	类似于addListener，但事件只会被触发一次，之后将自动移除。
`removeListener( listener)`	`none`	删除由上述 event.addDomListener 和 event.addListener 传回的指定侦听器。
`trigger( instance, eventName, extArgs)`	`none`	触发非DOM事件触发非DOM事件eventName时，extArgs将扩展到事件监听函数（handler）接受到的event参数中。如:在extArgs内写入{m:10,p:2}，eventName监听函数（handler）可以接收到包含m,p两个key值的event对象。

EventListener 对象规范（自v1.2 新增）

此对象没有构造函数，由 event 的 addDomListener()、addListener()方法返回，在需要移除事件监听器时，作为参数传递给 removeListener() 方法。

MapsEvent 对象规范（自v1.2 新增）

此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回，包含以下字段：

MapsEventOptions	类型	说明
`lnglat`	`LngLat`	发生事件时光标所在处的经纬度坐标。
`pixel`	`Pixel`	发生事件时光标所在处的像素坐标。
`type`	`String`	事件类型。
`target`	`Object`	发生事件的目标对象，不同类型返回target不同。例如，事件对象是Marker，则target表示目标对象为Marker，事件对象是其他，则随之改变。

2. 自定义事件

对于一些特殊情况（解耦代码等），我们需要自定义事件。我们可以使用 AMap.event.addEventListener或地图对象的 on方法进行事件绑定，使用 AMap.event.tigger方法或者地图对象 emit方法进行事件的派发。

事件最后更新时间: 2021年01月22日

事件有两种使用方式

第一种，针对Map、覆盖物等常用类，我们推荐直接使用这些类的对象的on、off成员方法来实现事件的简单绑定和移除，具有使用方便、代码简洁的特点

方法	返回值	说明
`on( eventName, handler, context)`		注册事件，给Map或者覆盖物对象注册事件 eventName：事件名称（必填）， handler：事件回调函数（必填）， context：事件回调中的上下文（可选，缺省时，handler中this为调用on方法的对象本身，否则this指向context引用的对象）注意：多次绑定时，当eventName、handler函数对象、context对象有任意一个不一样就会再次绑定。
`off( eventName, handler, context)`		移除事件绑定 eventName：事件名称（必填）， handler：事件功能函数（必填）， context：事件上下文（可选，缺省时为调用off方法的对象本身，否则为context引用的对象）注意：只有当off与on的eventName、handler函数对象、context对象完全一致时才能有效移除监听。

第二种,使用AMap.event命名空间

方法	返回值	说明
`addDomListener( instance, eventName, handler, context)`	`EventListener`	注册DOM对象事件：给DOM对象注册事件，并返回eventListener。运行AMap.event.removeListener(eventListener)可以删除该事件的监听器。参数： instance：需注册事件的DOM对象（必填）， eventName：事件名称（必填）， handler：事件功能函数（必填）， context：事件上下文（可选，缺省时，handler中this指向参数instance引用的对象，否则this指向context引用的对象）
`addListener( instance, eventName, handler, context)`	`EventListener`	注册对象事件：给对象注册事件，并返回eventListener。运行AMap.event.removeListener(eventListener)可以删除该事件的监听器。参数： instance：需注册事件的对象（必填）， eventName：事件名称（必填）， handler：事件功能函数（必填）， context：事件上下文（可选，缺省时，handler中this指向参数instance引用的对象，否则this指向context引用的对象）
`addListenerOnce( instance, eventName, handler, context)`	`EventListener`	类似于addListener，但事件只会被触发一次，之后将自动移除。
`removeListener( listener)`	`none`	删除由上述 event.addDomListener 和 event.addListener 传回的指定侦听器。
`trigger( instance, eventName, extArgs)`	`none`	触发非DOM事件触发非DOM事件eventName时，extArgs将扩展到事件监听函数（handler）接受到的event参数中。如:在extArgs内写入{m:10,p:2}，eventName监听函数（handler）可以接收到包含m,p两个key值的event对象。

0 0 投票数

文章评分