如何在 JavaScript 中触发 customEvent？[关闭]-解网

问：

这个问题是由错别字或无法再现的问题引起的。虽然类似的问题可能在这里是主题，但这个问题的解决方式不太可能帮助未来的读者。

6个月前关闭。

改进此问题

我正在尝试在 JavaScript 中实现一个简单的游戏，其中游戏本身是一个类，而有关游戏的信息是另一个类。每次用户单击鼠标后，都必须更新信息。我有两个班级。Grid 类是游戏本身。这是简化：

class Grid {
  constructor(container) {
    this.container = container;
    this.myEvent = new Event("myCustomEvent")
    this.container.addEventListener('click', () => {
      this.container.addEventListener("myCustomEvent", e => {
        console.log(e)
      })
    })
  }

这是 Info 类。

class Info {
  constructor(grid, container) {
    this.container = container;
    this.grid = grid;
    this.container.dispatchEvent(this.myEvent)
  }

然后，我创建两个类的实例：

const grid = new Grid(document.querySelector(".container"));
const info = new Info(grid, document.querySelector(".container"));

但是，这没有任何作用。有没有办法动态更新和显示一个类中存在但必须传递给另一个类的信息？我不想将这两个类混为一类。

我可以看到这有效。它注销事件：

class Grid {
  constructor(container) {
    this.container = container;
    this.myEvent = new Event("myCustomEvent")
    this.container.addEventListener("myCustomEvent", e => {
      console.log(e)
    })
    this.container.dispatchEvent(this.myEvent)
  }
const grid = new Grid(document.querySelector(".container"));

但是，当我在不同的类中调度事件时，情况并非如此。

JavaScript 类 custom-events

但我认为你的代码并不完美。你的目标是解耦，但你的 Info 类有 Grid 作为依赖项。你尝试与事件进行通信，这是一个很好的架构。出于某种原因，您过于努力地尝试 DRY，并设法在一个地方定义您的自定义事件。这不是一个好方法，只需删除 Grid 依赖项并将 Info 中的事件与任何 Grid 类无关地发出：

class Grid {
  constructor(container) {
    this.container = container;
    this.container.addEventListener('click', () => {
      this.container.addEventListener("myCustomEvent", e => {
        console.log(e)
      })
    })
  }

class Info {
  constructor(container) {
    this.container = container;
    this.container.dispatchEvent(new Event('myCustomEvent'))
  }

如何在 JavaScript 中触发 customEvent？[关闭]

How can I trigger a customEvent in JavaScript? [closed]

评论

评论