ArcGIS Maps SDK for JS：dojo/on 模块监听按钮的各种事件

文章目录

1 概述
2 示例代码

1 概述

在Web应用程序开发中，事件监听是实现交互性的重要手段。按钮作为常见的用户界面元素，对其事件监听的需求自然十分常见。在ArcGIS Maps SDK for JavaScript中，使用dojo/on模块监听按钮的各种事件能够有效地提升用户体验和应用程序的响应性。本文将详细介绍如何使用该模块以及其优点。

ArcGIS Maps SDK for JavaScript是一款强大的地图开发工具包，它提供了丰富的地图展示和交互功能。其中dojo/on模块是ArcGIS API for JavaScript中用于事件处理的非常重要的一部分。它提供了一种方式来监听和处理用户交互事件，如点击、悬停、触摸等。

在ArcGIS Maps SDK for JavaScript中，按钮事件主要包括click、dblclick、mouseover、mouseout等。这些事件分别对应着用户对按钮的不同交互行为。例如，click事件在用户点击按钮时触发，dblclick事件则在用户双击按钮时触发。

2 示例代码

以下是如何使用dojo/on模块来监听按钮的各种事件的示例代码：

<!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.27/esri/themes/light/main.css" />
    <!-- 引用 main.css 样式表 -->
    <script src="https://js.arcgis.com/4.27/"></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: 4, // 初始LOD缩放等级（0-23） level of detail (LOD)
                // scale: 50000000, // 设置初始比例尺为 1:50,000,000  zoom和scale选其一即可
                center: [108, 32] // 地图初始中心位置经纬度 [longitude,latitude]
            });

            // 获取要监听的按钮元素
            var button = document.getElementById("myBtn");

            // 监听按钮的点击事件
            on(button, "click", function () {
                alert("Button clicked!");
            });

            // 监听按钮的mouseover事件
            on(button, "mouseover", function () {
                console.log("Mouse over event triggered!");
            });

            // 监听按钮的mouseout事件
            on(button, "mouseout", function () {
                console.log("Mouse out event triggered!");
            });

            // 监听按钮的dblclick事件
            on(button, "dblclick", function () {
                alert("Button double clicked!");
            });

            // 监听按钮的mousedown事件
            on(button, "mousedown", function () {
                console.log("Mouse down event triggered!");
            });

            // 监听按钮的mouseup事件
            on(button, "mouseup", function () {
                console.log("Mouse up event triggered!");
            });

            // 监听按钮的touchstart事件
            on(button, "touchstart", function (event) {
                console.log("Touch start event triggered! ", event);
            });

            // 监听按钮的touchend事件
            on(button, "touchend", function (event) {
                console.log("Touch end event triggered! ", event);
            });

        });
    </script>
</body>

</html>

在上述代码中，我们导入了dojo/on模块，然后，我们使用dojo/on模块的各种事件来监听myBtn按钮。当这些事件被触发时，回调函数就会被执行。这些回调函数可以执行任何需要的操作，例如在控制台打印一条消息，显示一个警告框，或者执行其他任何操作。注意，这里的每一个事件都接收一个事件对象作为参数，这个事件对象包含了关于该事件的详细信息。

孙 悟 空