gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 00:13:09 25 4
gpt4 key购买 nike

我有一个 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 事件调用类方法?

最佳答案

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

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

关于javascript - 如何在没有全局变量的情况下从html中的不同事件调用类方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54631707/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com