Article directory
1 Overview
In web application development, event listening is an important means to achieve interactivity. As a common user interface element, buttons have a very common need for event monitoring.
In ArcGIS Maps SDK for JavaScript (v4.24 and previous versions), use the dojo/on module to listen to various events of buttons Can effectively improve user experience and application responsiveness.
ArcGIS Maps SDK for JavaScript is a powerful map development toolkit that provides rich map display and interactive functions. The dojo/on module is a very important part of the ArcGIS API for JavaScript for event processing. It provides a way to listen and handle user interaction events such as click, hover, touch (mobile), etc.
In ArcGIS Maps SDK for JavaScript, button events mainly include click, dblclick, mouseover, mouseout, etc. These events correspond to different user interactions with buttons. For example, the click event is triggered when the user clicks a button, and the dblclick event is triggered when the user double-clicks the button.
=======================================================
Note: The dojo module is only applicable to v4.24 and previous versions. Later versions cannot be used and an error will be reported.
=======================================================
2 Sample code
Use various events of the dojo/on module to monitormyBtn buttons. When these events are triggered, the callback function will be executed. These callback functions can perform any desired action, such as printing a message to the console, displaying an alert box, or performing any other action. Note that each event here receives an event object as a parameter, and this event object contains detailed information about the event.
The following is sample code on how to use the dojo/on module to listen to various events on a button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>监听各种事件</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript -->
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<!-- 引用 main.css 样式表 -->
<script src="https://js.arcgis.com/4.24/"></script>
</head>
<body>
<!-- 存放地图内容的div -->
<div id="viewDiv"></div>
<button id="myBtn">点我一下</button>
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/on",
"dojo/domReady!"
], (
Map,
MapView,
on
) => {
// 创建Map对象，指定地图
const map = new Map({
basemap: "topo-vector"
});
// 创建MapView对象
const view = new MapView({
container: "viewDiv", // viewDiv为容器div的id
map: map, // 地图所在的Map对象
zoom: 3, // 初始LOD缩放等级（0-23） level of detail (LOD)
// scale: 50000000, // 设置初始比例尺为 1:50,000,000 zoom和scale选其一即可
center: [108, 32] // 地图初始中心位置经纬度 [longitude,latitude]
});
// 将按钮添加到地图右上角
view.ui.add('myBtn','top-right')
// 获取要监听的按钮元素
var button = document.getElementById("myBtn");
// 监听按钮的点击事件
on(button, "click", function () {
console.log('我单击了按钮~~~');
});
// 监听按钮的mouseover事件
on(button, "mouseover", function () {
console.log("我来了~~~");
});
// 监听按钮的mouseout事件
on(button, "mouseout", function () {
console.log("我走了~~~");
});
// 监听按钮的dblclick事件
on(button, "dblclick", function () {
console.log("我双击了按钮~~~");
});
// 监听按钮的mousedown事件
on(button, "mousedown", function () {
console.log("按下");
});
// 监听按钮的mouseup事件
on(button, "mouseup", function () {
console.log("松开");
});
// 移动端监听按钮的touchstart事件
on(button, "touchstart", function (event) {
console.log("移动端：按下 ", event);
});
// 移动端监听按钮的touchend事件
on(button, "touchend", function (event) {
console.log("移动端：松开 ", event);
});
});
</script>
</body>
</html>
3 Result display
Web version:
Mobile version:
