时间戳

首页 > 解决方案 > 如何在没有全局变量的情况下从html中的不同事件调用类方法

javascript - 如何在没有全局变量的情况下从html中的不同事件调用类方法

问题描述

我在 JS 中有一个游戏，它从 body onload 开始，然后使用在 body onmousemove 事件上更新的光标位置。

首先，我的 JS 文件中有全局变量和单独的函数，我这样称呼它们：

<body onload="startGame()" onmousemove="setMousePosition(event)">

它工作得很好，但我想摆脱全局变量。我已将所有内容都包含在 Game 类中，但现在我不知道如何从不同的 html 事件中调用类方法。我能想到的唯一解决方案是全局声明游戏对象，但我仍然必须使用全局变量（这比一大堆更好，但仍然......）：

HTML：

<body onload="game = new Game()" onmousemove="game.setMousePosition(event)">

JS：

class Game {

    constructor() {
        // do the thing
    }

    setMousePosition(e) {
        // do the thing
    }
}

let game;

是否有任何优雅的方法可以在没有全局变量的情况下从不同的 html 事件调用类方法？

标签： javascript

解决方案

通过 HTML 属性添加事件侦听器实际上是一种古老且不推荐的方法，这正是您遇到的原因：您需要全局变量。现代方法是不使用 HTML 来处理事件，而是使用 JavaScript 首先查找您想要的元素，然后使用函数向其添加事件侦听器addEventListener。因此，在您的情况下，您的游戏初始化代码中将包含如下代码。

document.body.addEventListener('mousemove', setMousePosition);

推荐阅读