没有match的答案？试试对话大模型
（→事件参数和this） |
|||
| （未显示1个用户的4个中间版本） | |||
| 第1行： | 第1行： | ||
{{jspopular-sidebar}} | {{jspopular-sidebar}} | ||
| − | == | + | <div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text"> |
| − | + | ||
浏览器中的JavaScript是“事件驱动的”，这表示JavaScript通过生成事件来响应交互，并期望程序能够“监听”感兴趣的活动。例如，在浏览器中，用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器，并在接收这些事件时执行代码。 | 浏览器中的JavaScript是“事件驱动的”，这表示JavaScript通过生成事件来响应交互，并期望程序能够“监听”感兴趣的活动。例如，在浏览器中，用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器，并在接收这些事件时执行代码。 | ||
| − | + | 百度地图API拥有一个自己的事件模型，程序员可监听地图API对象的自定义事件，使用方法和DOM事件类似。但请注意，地图API事件是独立的，与标准DOM事件不同。</div><div class="aloneDemo"><div dir="https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/demo/event.html"></div><div class="top_right">[http://lbsyun.baidu.com/jsdemo.htm#h0_4 DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">事件监听</div></div><div class="serve-explain-text"> | |
| − | 百度地图API拥有一个自己的事件模型，程序员可监听地图API对象的自定义事件，使用方法和DOM事件类似。但请注意，地图API事件是独立的，与标准DOM事件不同。 | + | |
| − | + | ||
| − | == | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | ==事件监听= | + | |
| − | + | ||
百度地图API中的大部分对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。 | 百度地图API中的大部分对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。 | ||
| − | + | 有关地图API对象的事件，请参考完整的[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a0b0 API类参考文档]。</div><div class="devguide"><div class="leftborderbg" style="height:950px;"></div><div class="devguideorder"><span>1</span>弹窗事件</div><div class="devguidecenter">addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。 | |
| − | + | 如下示例中，每当用户点击地图时，会弹出一个警告框： | |
| − | + | <pre class="prettyprint codestyle">var map = new BMap.Map("container"); | |
| − | + | ||
| − | < | + | |
| − | + | ||
| − | var map = new BMap.Map("container"); | + | |
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | ||
map.addEventListener("click", function(){ | map.addEventListener("click", function(){ | ||
| − | + | alert("您点击了地图。"); | |
| − | }); | + | } |
| − | + | ); | |
| − | </ | + | </pre> |
| − | + | </div><div class="devguideorder"><span>2</span>捕获状态</div><div class="devguidecenter">通过监听事件还可以捕获事件触发后的状态。 | |
| − | + | 如下示例，显示用户拖动地图后地图中心的经纬度信息： | |
| − | + | <pre class="prettyprint codestyle">var map = new BMap.Map("container"); | |
| − | < | + | |
| − | + | ||
| − | var map = new BMap.Map("container"); | + | |
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | ||
map.addEventListener("dragend", function(){ | map.addEventListener("dragend", function(){ | ||
| − | + | var center = map.getCenter(); | |
| − | + | alert("地图中心点变更为：" + center.lng + ", " + center.lat); | |
| − | }); | + | } |
| + | ); | ||
| + | </pre> | ||
| + | </div></div><div class="bluetitle"><div class="services-title-text">事件参数和this</div></div><div class="serve-explain-text"> | ||
| + | 在标准的DOM事件模型中（DOM Level 2 Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。 | ||
| − | </ | + | 百度地图API的事件模型与此类似，在事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target）。 |
| − | + | API还保证函数内的this指向触发（同时也是绑定）事件的API对象。</div><div class="devguide"><div class="leftborderbg" style="height:950px;"></div><div class="devguideorder"><span>1</span>事件参数e获取有关信息</div><div class="devguidecenter">例如，通过参数e得到点击的经纬度坐标：<pre class="prettyprint codestyle">var map = new BMap.Map("container"); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | == | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | var map = new BMap.Map("container"); | + | |
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | ||
map.addEventListener("click", function(e){ | map.addEventListener("click", function(e){ | ||
| − | + | alert(e.point.lng + ", " + e.point.lat); | |
| − | }); | + | }); |
| − | + | </pre> | |
| − | </ | + | </div><div class="devguideorder"><span>2</span>this指向DOM元素</div><div class="devguidecenter">监听函数中this会指向触发该事件的DOM元素。 |
| − | + | 如下示例，通过this得到地图缩放后的级别： | |
| − | + | <pre class="prettyprint codestyle">var map = new BMap.Map("container"); | |
| − | + | ||
| − | < | + | |
| − | + | ||
| − | var map = new BMap.Map("container"); | + | |
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | ||
map.addEventListener("zoomend", function(){ | map.addEventListener("zoomend", function(){ | ||
| − | + | alert("地图缩放至：" + this.getZoom() + "级"); | |
| − | }); | + | }); |
| − | + | </pre> | |
| − | </ | + | </div></div><div class="bluetitle"><div class="services-title-text">移除监听事件</div></div><div class="serve-explain-text"> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | = | + | |
| − | + | ||
当您不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。 | 当您不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。 | ||
| − | + | </div><div class="devguide"><div class="leftborderbg" style="height:950px;"></div><div class="devguideorder"><span>1</span>移除监听事件</div><div class="devguidecenter">如下示例中，用户第一次点击地图会触发事件监听函数，在函数内部对事件监听进行了移除，因此后续的点击操作则不会触发监听函数。<pre class="prettyprint codestyle">var map = new BMap.Map("container"); | |
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | var map = new BMap.Map("container"); | + | |
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); | ||
function showInfo(e){ | function showInfo(e){ | ||
| − | + | alert(e.point.lng + ", " + e.point.lat); | |
| − | + | map.removeEventListener("click", showInfo); | |
} | } | ||
| − | map.addEventListener("click", showInfo); | + | map.addEventListener("click", showInfo); |
| − | + | </pre> | |
| − | </ | + | </div></div> |
2021年5月7日 (五) 23:12的最后版本
简介
浏览器中的JavaScript是“事件驱动的”，这表示JavaScript通过生成事件来响应交互，并期望程序能够“监听”感兴趣的活动。例如，在浏览器中，用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器，并在接收这些事件时执行代码。
百度地图API拥有一个自己的事件模型，程序员可监听地图API对象的自定义事件，使用方法和DOM事件类似。但请注意，地图API事件是独立的，与标准DOM事件不同。事件监听
百度地图API中的大部分对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。
有关地图API对象的事件，请参考完整的API类参考文档。1弹窗事件
addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。
如下示例中，每当用户点击地图时，会弹出一个警告框：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", function(){
alert("您点击了地图。");
}
);
2捕获状态
通过监听事件还可以捕获事件触发后的状态。
如下示例，显示用户拖动地图后地图中心的经纬度信息：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("dragend", function(){
var center = map.getCenter();
alert("地图中心点变更为：" + center.lng + ", " + center.lat);
}
);
事件参数和this
在标准的DOM事件模型中（DOM Level 2 Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。
百度地图API的事件模型与此类似，在事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target）。
API还保证函数内的this指向触发（同时也是绑定）事件的API对象。1事件参数e获取有关信息
例如，通过参数e得到点击的经纬度坐标：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", function(e){
alert(e.point.lng + ", " + e.point.lat);
});
2this指向DOM元素
监听函数中this会指向触发该事件的DOM元素。
如下示例，通过this得到地图缩放后的级别：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("zoomend", function(){
alert("地图缩放至：" + this.getZoom() + "级");
});
移除监听事件
当您不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。
1移除监听事件
如下示例中，用户第一次点击地图会触发事件监听函数，在函数内部对事件监听进行了移除，因此后续的点击操作则不会触发监听函数。
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
function showInfo(e){
alert(e.point.lng + ", " + e.point.lat);
map.removeEventListener("click", showInfo);
}
map.addEventListener("click", showInfo);